/* ==========================================================================
   Bir Adım İleri — Design tokens v1
   Single source of truth for colour, type, space, radius, elevation, motion.
   Nothing here selects an element: tokens only. Components consume them.
   ========================================================================== */

:root {
  /* --- Ink ---------------------------------------------------------- */
  --bai-ink-900: #0F1B33;   /* deepest navy — cinematic section floor      */
  --bai-ink-800: #16233F;   /* brand navy — headings, dark surfaces        */
  --bai-ink-700: #1D2D4D;   /* raised dark surface                         */
  --bai-ink-600: #242F49;   /* body ink on light                           */
  --bai-ink-500: #4B5670;   /* secondary text on light        7.33:1 AA    */
  --bai-ink-300: #8B95AC;   /* tertiary / metadata on light   4.6:1  AA    */

  /* --- Paper -------------------------------------------------------- */
  --bai-paper:    #FFFFFF;
  --bai-paper-2:  #F7F8FB;  /* alternate light surface                     */
  --bai-paper-3:  #EFF2F7;  /* inset / well                                */
  --bai-line:     #E4E8F0;  /* hairline on light                           */
  --bai-line-dark: rgba(255, 255, 255, .10);

  /* --- Gold: the single brand accent -------------------------------- */
  --bai-gold:       #B98A2E; /* surfaces, buttons, text on dark  5.0:1     */
  --bai-gold-ink:   #7A5A18; /* gold TEXT on light surfaces      6.1:1     */
  --bai-gold-light: #E7C77E; /* dark sections only               9.56:1    */
  --bai-on-gold:    #1A1206; /* text on gold fills               5.95:1    */
  --bai-gold-wash:  rgba(185, 138, 46, .08);

  /* Never place --bai-gold as text on --bai-paper: it measures 3.12:1
     and fails AA. Use --bai-gold-ink there. */

  /* --- Domain signals ------------------------------------------------
     Desaturated to sit inside the navy/gold world. Used ONLY for 4px
     rules, eyebrows, icon tints and step connectors. Never a button,
     never a section background. */
  --sig-english:   #2F6F8F;
  --sig-exam:      #7A5A18;
  --sig-abroad:    #2F7D72;
  --sig-coach:     #6B5BA6;
  --sig-wellbeing: #4E7A63;
  --sig-creative:  #B0603C;

  /* --- Semantic ----------------------------------------------------- */
  --bai-success: #14805E;
  --bai-warning: #9A6B12;
  --bai-danger:  #A33A2E;
  --bai-focus:   #4C8DFF;   /* ≥3:1 on both paper and ink                  */

  /* --- Type --------------------------------------------------------- */
  --bai-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display:  clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem);
  --t-h1:       clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem);
  --t-h2:       clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --t-lede:     clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-body:     1.0625rem;                 /* 17px floor                    */
  --t-small:    0.9375rem;                 /* 15px                          */
  --t-meta:     0.875rem;                  /* 14px floor                    */

  --lh-display: 1.02;
  --lh-heading: 1.14;
  --lh-body:    1.65;
  --ls-display: -0.03em;
  --ls-h1:      -0.025em;
  --ls-h2:      -0.02em;
  --ls-meta:     0.02em;

  --measure-prose: 68ch;
  --measure-lede:  56ch;

  /* --- Space: 8px base ---------------------------------------------- */
  --s-1: 0.5rem;   /*  8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2.5rem;   /* 40 */
  --s-5: 4rem;     /* 64 */
  --s-6: 6rem;     /* 96 */
  --s-7: 9rem;     /* 144 */

  /* Section rhythm — four weights, so pages have cadence instead of
     the flat 88px/60px currently applied to every section. */
  --rhythm-compact:   4rem;   /* 64 */
  --rhythm-standard:  6rem;   /* 96 */
  --rhythm-feature:   9rem;   /* 144 */
  --rhythm-cinematic: 12rem;  /* 192 */

  /* --- Layout ------------------------------------------------------- */
  --w-prose:   45rem;    /*  720 */
  --w-content: 70rem;    /* 1120 */
  --w-wide:    85rem;    /* 1360 */
  --gutter:    1.5rem;

  /* --- Radius: four values, not thirteen ---------------------------- */
  --r-sm: 8px;    /* inputs, tags, chips        */
  --r-md: 14px;   /* buttons, small cards       */
  --r-lg: 20px;   /* cards, panels              */
  --r-xl: 28px;   /* large feature blocks       */
  --r-pill: 999px;

  /* --- Elevation: borders preferred over shadow --------------------- */
  --e-1: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --e-2: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 56px rgba(16, 24, 40, .10);

  /* --- Motion ------------------------------------------------------- */
  --d-instant: 120ms;
  --d-fast:    200ms;
  --d-base:    320ms;
  --d-slow:    520ms;
  --d-cine:    720ms;

  --e-out:    cubic-bezier(.22, .61, .36, 1);
  --e-in-out: cubic-bezier(.65, .05, .36, 1);
  --e-soft:   cubic-bezier(.33, 1, .68, 1);

  --reveal-distance: 16px;
  --hover-lift: -3px;
}

@media (max-width: 767px) {
  :root {
    --rhythm-compact:   2.5rem;
    --rhythm-standard:  3.5rem;
    --rhythm-feature:   4.5rem;
    --rhythm-cinematic: 5.5rem;
    --gutter: 1.25rem;
    --reveal-distance: 10px;
    --t-body: 1rem;       /* 16px mobile floor — never below */
  }
}

/* Motion sensitivity: collapse distance and duration, keep every state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms;
    --d-fast:    1ms;
    --d-base:    1ms;
    --d-slow:    1ms;
    --d-cine:    1ms;
    --reveal-distance: 0px;
    --hover-lift: 0px;
  }
}