/* ============================================================
   Rakeen Brand System — Design Tokens
   ============================================================ */

@import url('../vendor/fonts/fonts.css');

:root {
  /* ---- Brand colors ----
     The four committed brand values. Everything else is derived. */
  --rk-ink:        #161d36;   /* deep navy — primary ink */
  --rk-mist:       #c6dfdf;   /* light teal — soft surface, accents */
  --rk-paper:      #f3f8f8;   /* off-white — page background */
  --rk-blue:       #3a5dc0;   /* signal blue — CTAs, focus */
  --rk-glow:       #ffd587;   /* warm filament — bulb glow, accents */

  /* Ink scale (opacities of --rk-ink) */
  --ink-100: #161d36;
  --ink-80:  rgba(22,29,54,0.82);
  --ink-65:  rgba(22,29,54,0.66);
  --ink-50:  rgba(22,29,54,0.50);
  --ink-35:  rgba(22,29,54,0.35);
  --ink-20:  rgba(22,29,54,0.18);
  --ink-12:  rgba(22,29,54,0.12);
  --ink-8:   rgba(22,29,54,0.08);
  --ink-5:   rgba(22,29,54,0.05);

  /* Mist scale */
  --mist-100: #c6dfdf;
  --mist-60:  rgba(198,223,223,0.60);
  --mist-40:  rgba(198,223,223,0.40);
  --mist-20:  rgba(198,223,223,0.20);

  /* Blue scale */
  --blue-100: #3a5dc0;
  --blue-80:  #4f6fc8;
  --blue-120: #2e4ba1;
  --blue-tint:rgba(58,93,192,0.08);
  --blue-glow:rgba(58,93,192,0.22);

  /* Warm filament scale — the only warm value in the system, used sparingly */
  --glow-100: #ffd587;
  --glow-soft:#ffefc2;
  --glow-tint:rgba(255,213,135,0.16);
  --glow-aura:rgba(255,213,135,0.32);

  /* Paper scale */
  --paper:   #f3f8f8;
  --paper-2: #ffffff;
  --paper-3: #fafcfc;

  /* ---- Surfaces (semantic) ---- */
  --bg-page:    var(--paper);
  --bg-elevated:var(--paper-2);
  --bg-soft:    var(--mist-40);
  --bg-deep:    var(--rk-ink);
  --text:       var(--rk-ink);
  --text-soft:  var(--ink-65);
  --text-mute:  var(--ink-50);
  --accent:     var(--rk-blue);

  /* ---- Type ---- */
  --font-display:    'Fraunces', 'Manrope', -apple-system, 'New York', 'Times New Roman', serif;
  --font-display-sans: 'Manrope', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-body:       'Manrope', -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-2xs: 11px;   --t-xs:  13px;   --t-sm:  14px;   --t-base: 16px;
  --t-md:  17px;   --t-lg:  19px;   --t-xl:  22px;   --t-2xl: 28px;
  --t-3xl: 36px;   --t-4xl: 48px;   --t-5xl: 64px;   --t-6xl: 88px;
  --t-7xl: 120px;  --t-8xl: 160px;

  --w-200: 200; --w-300: 300; --w-400: 400; --w-500: 500;
  --w-600: 600; --w-700: 700; --w-800: 800;

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.35;
  --lh-relax:  1.55;
  --lh-loose:  1.75;

  /* Letter spacing for display type — Apple-style, tighten as size grows */
  --ls-display: -0.035em;
  --ls-title:   -0.022em;
  --ls-tight:   -0.012em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.16em;

  /* ---- Spacing scale (4px base, generous) ---- */
  --s-0: 0;       --s-1: 4px;     --s-2: 8px;     --s-3: 12px;
  --s-4: 16px;    --s-5: 20px;    --s-6: 24px;    --s-7: 32px;
  --s-8: 40px;    --s-9: 56px;    --s-10: 72px;   --s-11: 96px;
  --s-12: 128px;  --s-13: 160px;  --s-14: 200px;  --s-15: 256px;

  /* ---- Radii ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-3xl: 48px;
  --r-pill:999px;

  /* ---- Elevation (no borders, only soft shadows) ---- */
  --shadow-1: 0 1px 2px rgba(22,29,54,0.04), 0 1px 1px rgba(22,29,54,0.025);
  --shadow-2: 0 4px 14px rgba(22,29,54,0.06), 0 1px 3px rgba(22,29,54,0.04);
  --shadow-3: 0 12px 36px rgba(22,29,54,0.08), 0 3px 8px rgba(22,29,54,0.05);
  --shadow-4: 0 24px 64px rgba(22,29,54,0.12), 0 6px 16px rgba(22,29,54,0.06);
  --shadow-5: 0 40px 100px rgba(22,29,54,0.18), 0 12px 28px rgba(22,29,54,0.10);
  --shadow-blue:  0 16px 40px rgba(58,93,192,0.28);
  --shadow-blue-lg: 0 28px 80px rgba(58,93,192,0.42);

  /* ---- Motion ----
     Apple uses ~250-450ms with a soft ease-out. We codify three durations
     and three easings; everything else is built on top. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* primary — soft landing */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* smooth two-way */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);    /* punchy reveal */
  --ease-linear: linear;

  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --dur-4: 680ms;
  --dur-5: 1100ms;
}

/* Focus ring used everywhere — only on focus-visible, never on hover. */
:root {
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--blue-glow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; }
}