/* ============================================================
   Drupal4Edu — Color tokens
   Extracted from the Figma usage analysis (real brand values).
   Base palette + semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand: primary blue ---- */
  --blue-500: #0293d4;        /* primary action / links — rgb(2,147,212) */
  --blue-logo: #009bd9;       /* drupart wordmark blue — rgb(0,155,217) */
  --blue-400: #2aa6dd;
  --blue-300: #6fc3e8;
  --blue-200: #c6e6f6;        /* light surface — rgb(198,230,246) */
  --blue-100: #cdedf9;        /* lighter surface — rgb(205,237,249) */
  --blue-50:  #e8f6fc;

  /* ---- Brand: navy (deep institutional blue) ---- */
  --navy-900: #01091a;        /* near-black navy — rgb(1,9,26) */
  --navy-800: #002254;        /* rgb(0,34,84) */
  --navy-700: #051e57;        /* primary dark / CTA — rgb(5,30,87) */
  --navy-600: #112f65;        /* heading navy / gradient end — rgb(17,47,101) */
  --navy-500: #12285f;        /* rgb(18,40,95) */
  --navy-400: #32477b;        /* rgb(50,71,123) */

  /* ---- Accent: hero purple ---- */
  --purple-600: #7847e6;      /* hero gradient start — rgb(120,71,230) */
  --purple-300: #ccbaf4;      /* soft purple surface — rgb(204,186,244) */
  --purple-100: #ede7fb;

  /* ---- Accent: yellow (Drupal spark) ---- */
  --yellow-400: #fddd04;      /* rgb(253,221,4) */
  --yellow-300: #fdda30;      /* rgb(253,218,48) */

  /* ---- Neutrals (cool, blue-tinted grays) ---- */
  --white:     #ffffff;
  --gray-50:   #fbfbfb;       /* off-white surface — rgb(251,251,251) */
  --gray-100:  #f3f4f6;       /* accordion fill */
  --gray-150:  #e6e7eb;       /* hairline border — rgb(230,231,235) */
  --gray-200:  #dedfe8;       /* rgb(222,223,232) */
  --gray-300:  #c4c7d7;       /* rgb(196,199,215) */
  --gray-400:  #aeb1c7;       /* rgb(174,177,199) */
  --gray-500:  #989db8;       /* rgb(152,157,184) */
  --gray-600:  #687096;       /* muted text — rgb(104,112,150) */
  --gray-700:  #4d5054;       /* rgb(77,80,84) */
  --gray-900:  #1e1e1e;       /* near-black text — rgb(30,30,30) */
  --black:     #000000;

  /* ---- Status (derived to match palette) ---- */
  --success: #1e9e6a;
  --warning: #f0a818;
  --danger:  #e0455f;
  --info:    var(--blue-500);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Text */
  --text-heading:   var(--navy-600);
  --text-strong:    var(--navy-700);
  --text-body:      var(--gray-900);
  --text-muted:     var(--gray-600);
  --text-on-dark:   var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);
  --text-link:      var(--blue-500);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-card:    var(--white);
  --surface-sky:     var(--blue-200);   /* "Neden Drupal" section bg */
  --surface-sky-soft:var(--blue-100);
  --surface-purple:  var(--purple-300);
  --surface-dark:    var(--navy-700);

  /* Brand actions */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  #0282bd;
  --brand-cta:            var(--navy-700);   /* "Hemen Başlayın" */
  --brand-cta-hover:      #0a2a72;
  --accent:               var(--yellow-400);

  /* Borders */
  --border-subtle:  var(--gray-150);
  --border-strong:  var(--navy-700);
  --border-focus:   var(--blue-500);

  /* Gradients */
  --gradient-hero: linear-gradient(203.9deg, var(--purple-600) -15.7%, var(--navy-600) 63.1%);
  --gradient-navy: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-600) 100%);
}