/* =============================================================================
   RAYASA — Design tokens
   The single source of truth for colour, type, space, radius, shadow and motion.
   Nothing below this file should hard-code a raw value; if a value is needed
   twice, it belongs here.

   Palette anchor: #00539A, sampled from the Rayasa logotype. Every other blue
   in the system is derived from it, which is why the mark never looks pasted on.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Brand ------------------------------------------------------------- */
  --brand-950: #010f1e;
  --brand-900: #01203c;
  --brand-800: #01315c;
  --brand-700: #00427b;
  --brand-600: #00539a; /* the logotype blue */
  --brand-500: #0069c4;
  --brand-400: #1e85e6; /* primary interactive — passes AA on --bg */
  --brand-300: #59a7f0;
  --brand-200: #9bcaf7;

  --accent-600: #067f96;
  --accent-500: #0ea5c4;
  --accent-400: #22d3ee; /* cyan highlight: telemetry, live states */
  --accent-300: #67e8f9;

  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;

  /* --- Semantic ---------------------------------------------------------- */
  --ok-400: #34d399;
  --ok-500: #10b981;
  --warn-400: #fbbf24;
  --danger-400: #f87171;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #04060a;
  --surface-1: #070b13;
  --surface-2: #0a101c;
  --surface-3: #101827;
  --surface-4: #16202f;
  --surface-glass: rgb(8 13 22 / 72%);

  --line: rgb(255 255 255 / 7%);
  --line-strong: rgb(255 255 255 / 13%);
  --line-brand: rgb(30 133 230 / 32%);
  --line-accent: rgb(34 211 238 / 34%);

  /* --- Text -------------------------------------------------------------- */
  --text: #e8eef8;
  --text-soft: #b6c4d8;
  --text-muted: #8496ad;
  --text-dim: #5d6c83;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid scale, 320px → 1440px viewport. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
  --text-4xl: clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --text-5xl: clamp(2.375rem, 1.75rem + 2.9vw, 4.25rem);

  --leading-tight: 1.25;
  --leading-snug: 1.45;
  --leading-normal: 1.75;
  --leading-loose: 2.05; /* Persian body text needs the extra air */

  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

  /* --- Space (4px base) --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-gap: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* --- Radius ------------------------------------------------------------ */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-2xl: 1.75rem;
  --r-3xl: 2rem;
  --r-full: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 12px 28px -12px rgb(0 0 0 / 70%);
  --shadow-lg: 0 32px 64px -24px rgb(0 0 0 / 80%);
  --glow-brand: 0 0 32px -6px rgb(0 98 255 / 38%);
  --glow-accent: 0 0 34px -6px rgb(34 211 238 / 34%);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-400);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 460ms;

  /* --- Layout ------------------------------------------------------------ */
  --shell-max: 78rem;
  --shell-pad: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);
  --header-h: 4.75rem;
}

/* -----------------------------------------------------------------------------
   Motion preferences. Collapsing the duration tokens neutralises every
   transition in the system at once; the handful of looping keyframe animations
   opt out individually where they are defined.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}