/* ==========================================================================
   Kodon Systems — design tokens
   --------------------------------------------------------------------------
   Every colour here is derived from the brand assets themselves:
     · gold  #D4AD52 — sampled from the nodes in assets/icon.png
     · navy  #1D2D68 — sampled from the edges/wordmark in assets/logo.png
     · cream #FFFCED — sampled from the strokes in assets/logo-light.png
   The navy scale is the brand navy's hue (~227°) darkened — never black.
   Change values here and the whole site follows.
   ========================================================================== */

:root {
  /* ---- colour: navy scale (page canvas) -------------------------------- */
  --navy-950: #080d24;   /* deepest — status strip, panels behind panels    */
  --navy-900: #0b1130;   /* page background                                 */
  --navy-850: #0e1639;   /* alternate section band                          */
  --navy-800: #111a45;   /* raised surfaces, cards                          */
  --navy-700: #1d2d68;   /* the brand navy itself — borders, diagram edges  */
  --navy-600: #2a3d85;   /* hover edges, active borders                     */

  /* ---- colour: gold (the signal — use sparingly) ------------------------ */
  --gold:        #d4ad52;
  --gold-bright: #e5c87e;              /* hover / emphasis on dark          */
  --gold-deep:   #b3903f;              /* pressed state                     */
  --gold-wash:   rgba(212, 173, 82, 0.12);  /* tints, glows                 */
  --gold-line:   rgba(212, 173, 82, 0.35);  /* decorative rules             */

  /* ---- colour: text on dark --------------------------------------------- */
  --ink:      #fffced;                 /* headings — matches logo-light     */
  --text:     rgba(255, 252, 237, 0.86);    /* body                         */
  --muted:    #99a3c8;                 /* meta, captions (navy-tinted)      */
  --faint:    rgba(153, 163, 200, 0.16);    /* hairlines, card borders      */

  /* ---- colour: light surfaces (logo.png / icon.png live here only) ------ */
  --paper:      #f7f4ea;               /* light panel background            */
  --paper-text: #1d2d68;               /* navy text on paper                */
  --cream:      #f7f4ea;               /* cream card background             */
  --cream-text: #1d2d68;               /* navy text on cream                */

  /* ---- type -------------------------------------------------------------
     Sora  = display (echoes the wordmark's geometry without imitating it)
     Inter = text/UI · IBM Plex Sans Arabic joins both stacks for RTL      */
  --font-display: 'Sora', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-900: clamp(2.375rem, 2.5vw + 1.9rem, 4.25rem);  /* hero h1           */
  --fs-800: clamp(1.875rem, 1.8vw + 1.4rem, 2.75rem);  /* section h2        */
  --fs-700: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);    /* h3                */
  --fs-600: 1.25rem;                                   /* h4 / large lead   */
  --fs-500: 1.125rem;                                  /* lead paragraph    */
  --fs-400: 1rem;                                      /* body              */
  --fs-300: 0.875rem;                                  /* small             */
  --fs-200: 0.75rem;                                   /* micro / eyebrow   */

  /* ---- space & shape ---------------------------------------------------- */
  --container: 72rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);   /* vertical rhythm between acts  */
  --radius:    0.75rem;
  --radius-lg: 1.25rem;

  /* ---- node motif -------------------------------------------------------
     The logo's nodes are rings (circle + hole). --ring-* reproduces that
     form for markers, steps and focus states.                              */
  --ring-size: 0.75rem;
  --ring-stroke: 3px;

  /* ---- motion ------------------------------------------------------------
     Durations zero out under prefers-reduced-motion (see main.css).        */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* ---- elevation --------------------------------------------------------- */
  --shadow: 0 20px 50px -24px rgba(4, 7, 22, 0.85);
}