/* ============================================================
   RAKEEN ◇ BRAND TOKENS — single source of truth
   ============================================================
   Brand absolutes never change.
   Semantic tokens remap per [data-theme].
============================================================ */

@font-face {
  font-family: 'Neuropol';
  src: url('fonts/Neuropol.otf') format('opentype');
  font-weight: 400 700;
  font-display: swap;
}

/* =========================================================
   BRAND ABSOLUTES — identical across every theme
   These are the four numbers that define Rakeen.
   ========================================================= */
:root {
  --rk-blue:    #3A5DC0;   /* primary identity */
  --rk-ink:     #0C2144;   /* deep navy — type, dark surfaces */
  --rk-paper:   #F3F8F8;   /* off-white canvas */
  --rk-signal:  #7BE0FF;   /* electric cyan — alerts, focus */
  --rk-forest:  #063B2B;   /* tagline + secure-state accent */

  /* Status — same across themes */
  --ok:         #57E0A6;
  --warn:       #FFC857;
  --crit:       #FF5470;

  /* =========================================================
     TYPE — never changes per theme
     ========================================================= */
  --ff-display: 'Neuropol', 'Eurostile', 'Bank Gothic', system-ui, sans-serif;
  --ff-body:    'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --ff-arabic:  'IBM Plex Sans Arabic', 'Tajawal', 'Noto Sans Arabic', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-2xs: 0.625rem;   /* ~9–11px */
  --t-xs:  0.6875rem;  /* ~10–12px */
  --t-sm:  0.8125rem;  /* ~12–15px */
  --t-base: 0.9375rem; /* ~14–17px */
  --t-md:  1.0625rem;  /* ~15–19px */
  --t-lg:  1.25rem;    /* ~18–22px */
  --t-xl:  1.5rem;     /* ~21–27px */
  --t-2xl: 2rem;       /* ~28–36px */
  --t-3xl: 2.75rem;    /* ~38–49px */
  --t-4xl: 4rem;       /* ~56–72px */
  --t-5xl: 6rem;       /* ~84–108px */
  --t-6xl: 8.75rem;    /* ~122–157px */
  --t-7xl: 12.5rem;    /* ~175–225px */

  --ls-display: 0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.16em;
  --ls-extra:   0.32em;

  --lh-tight:  1.0;
  --lh-snug:   1.12;
  --lh-normal: 1.45;
  --lh-relax:  1.6;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --s-0: 0;     --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;
  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;--s-11: 192px; --s-12: 256px;

  /* =========================================================
     RADII
     ========================================================= */
  --r-0: 0;  --r-1: 2px;  --r-2: 4px;  --r-3: 8px;
  --r-4: 12px; --r-5: 16px; --r-6: 24px; --r-pill: 999px;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);

  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
  --dur-5: 1200ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container:        1240px;
  --container-narrow: 820px;
  --grid-gutter: 24px;
  --grid-col:    12;
  --grid-step:   48px;
}

/* =========================================================
   FLUID ROOT — base font-size scales with viewport so every
   rem-derived --t-* token, plus normal flow text, breathes
   together. ~14px on small phones → ~18px on big monitors.
   ========================================================= */
html {
  font-size: clamp(14px, calc(12.5px + 0.4vw), 18px);
}

/* =========================================================
   THEME · CYBER (default — dark)
   ========================================================= */
:root,
[data-theme="cyber"] {
  --void:       #050A1A;
  --ink-900:    #08132E;
  --ink-800:    #0C2144;
  --ink-700:    #122B59;
  --ink-600:    #1B3A75;

  /* Semantic surfaces */
  --bg:         var(--ink-900);
  --bg-2:       var(--ink-800);
  --bg-3:       #112856;
  --bg-deep:    var(--void);

  /* Semantic text */
  --fg:         var(--rk-paper);
  --fg-mute:    rgba(243, 248, 248, 0.66);
  --fg-faint:   rgba(243, 248, 248, 0.38);
  --fg-on-blue:    var(--rk-paper);
  --fg-on-signal:  var(--rk-ink);

  /* Lines, grids, focus */
  --border:     rgba(123, 224, 255, 0.10);
  --border-2:   rgba(123, 224, 255, 0.18);
  --grid-line:  rgba(123, 224, 255, 0.06);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--rk-signal);

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(123,224,255,0.04), 0 1px 3px rgba(5,10,26,0.4);
  --shadow-2: 0 4px 16px rgba(5,10,26,0.5), 0 0 0 1px rgba(123,224,255,0.06);
  --shadow-3: 0 24px 60px rgba(5,10,26,0.6), 0 0 0 1px rgba(123,224,255,0.08);
  --shadow-signal: 0 0 0 1px var(--rk-signal), 0 0 24px rgba(123,224,255,0.4);
  --shadow-blue:   0 0 0 1px var(--rk-blue),   0 0 28px rgba(58,93,192,0.35);

  /* --rk-spark = the "hot accent" used for eyebrows, telemetry, active states.
     Cyan is illegible on paper, so paper theme remaps this to brand blue. */
  --rk-spark: var(--rk-signal);

  /* Hero atmosphere */
  --bg-atmo:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(58,93,192,0.18), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(123,224,255,0.06), transparent 70%),
    var(--void);

  color-scheme: dark;
}

/* =========================================================
   THEME · PAPER (light, inverted)
   ========================================================= */
[data-theme="paper"] {
  --void:       #050A1A;            /* brand absolute — for the VOID swatch */
  --ink-900:    #F3F8F8;
  --ink-800:    #FFFFFF;
  --ink-700:    #EAF1F3;
  --ink-600:    #D5E1E6;

  --bg:         var(--rk-paper);
  --bg-2:       #FFFFFF;
  --bg-3:       #FAFCFC;
  --bg-deep:    #E6EEF1;

  --fg:         var(--rk-ink);
  --fg-mute:    rgba(12, 33, 68, 0.66);
  --fg-faint:   rgba(12, 33, 68, 0.40);
  --fg-on-blue:    var(--rk-paper);
  --fg-on-signal:  var(--rk-ink);

  --border:     rgba(12, 33, 68, 0.10);
  --border-2:   rgba(12, 33, 68, 0.18);
  --grid-line:  rgba(12, 33, 68, 0.05);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--rk-blue);

  --shadow-1: 0 1px 0 rgba(12,33,68,0.04), 0 1px 3px rgba(12,33,68,0.06);
  --shadow-2: 0 4px 16px rgba(12,33,68,0.06), 0 0 0 1px rgba(12,33,68,0.04);
  --shadow-3: 0 24px 60px rgba(12,33,68,0.10), 0 0 0 1px rgba(12,33,68,0.06);
  --shadow-signal: 0 0 0 1px var(--rk-blue), 0 0 24px rgba(58,93,192,0.20);
  --shadow-blue:   0 0 0 1px var(--rk-blue), 0 0 28px rgba(58,93,192,0.18);

  --rk-spark: var(--rk-blue);

  --bg-atmo:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(58,93,192,0.06), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(58,93,192,0.04), transparent 70%),
    var(--rk-paper);

  color-scheme: light;
}

/* =========================================================
   THEME · MIDNIGHT (OLED, max contrast)
   ========================================================= */
[data-theme="midnight"] {
  --void:       #000000;
  --ink-900:    #060812;
  --ink-800:    #0A0E1F;
  --ink-700:    #131A33;
  --ink-600:    #1C2647;

  --bg:         #000000;
  --bg-2:       #0A0E1F;
  --bg-3:       #131A33;
  --bg-deep:    #000000;

  --fg:         #FFFFFF;
  --fg-mute:    rgba(255, 255, 255, 0.70);
  --fg-faint:   rgba(255, 255, 255, 0.42);
  --fg-on-blue:    #FFFFFF;
  --fg-on-signal:  #000000;

  --border:     rgba(123, 224, 255, 0.18);
  --border-2:   rgba(123, 224, 255, 0.30);
  --grid-line:  rgba(123, 224, 255, 0.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--rk-signal);

  --shadow-1: 0 0 0 1px rgba(123,224,255,0.10);
  --shadow-2: 0 0 0 1px rgba(123,224,255,0.14), 0 4px 24px rgba(0,0,0,0.6);
  --shadow-3: 0 0 0 1px rgba(123,224,255,0.20), 0 24px 80px rgba(0,0,0,0.8);
  --shadow-signal: 0 0 0 1px var(--rk-signal), 0 0 36px rgba(123,224,255,0.6);
  --shadow-blue:   0 0 0 1px var(--rk-blue),   0 0 36px rgba(58,93,192,0.5);

  --rk-spark: var(--rk-signal);

  --bg-atmo:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(123,224,255,0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(58,93,192,0.10), transparent 70%),
    #000000;

  color-scheme: dark;
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Theme transition — when the user switches themes, ease all color */
html, body, .nav, .swatch, .variant-card, .con-card, .type-stage,
.motion-card, .dont, .download, .footer, .logo-cell, .ui-card,
.btn-ui, .input, .alert, .tab, .toc, .toc__item, .app-card {
  transition:
    background var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

/* RTL direction tweaks (applied when [dir="rtl"]) */
[dir="rtl"] .nav__brand-tag { border-left: none; border-right: 1px solid var(--border); padding-left: 0; padding-right: 12px; margin-left: 0; margin-right: 4px; }
[dir="rtl"] body { font-family: var(--ff-arabic), var(--ff-body); }