/* ============================================================================
   NexDonor design tokens — "Ethereal Precision"
   ----------------------------------------------------------------------------
   CANONICAL SOURCE. This file is the single definition of the system.
   The assessment app vendors a copy; edits are made HERE and synced down.
   Never edit the vendored copy. See DESIGN.md.

   THEMING
   Light is the default and needs no attribute. Dark applies ONLY under an
   explicit [data-theme="dark"] on the root element. There is deliberately no
   prefers-color-scheme block: the landing page must stay light regardless of
   the visitor's OS setting, and the app resolves "system" to an explicit
   attribute in its own boot script. One dark block, no duplication, no drift.

   Every value below was either transcribed from the shipping system or
   derived and verified — contrast ratios and colour-vision separation are
   recorded in DESIGN.md and reproducible via design-exploration/palette.py.
   ============================================================================ */

:root {
  /* ---- surfaces ------------------------------------------------------- */
  --surface-bg:      #F5F5F0;   /* page ground — soft parchment            */
  --surface-base:    #EEEEE8;   /* alternating band                        */
  --surface-raised:  #FFFFFF;   /* cards, panels                           */
  --scrim:           rgba(0,0,0,0.82);  /* behind a modal / lightbox       */

  /* ---- borders — whisper-thin, warm ----------------------------------- */
  --border-faint:    rgba(199,198,203,0.30);
  --border-subtle:   rgba(199,198,203,0.60);
  --border-default:  #C7C6CB;

  /* ---- ink ------------------------------------------------------------ */
  --text-primary:    #1b1c1c;   /* 15.62:1 on parchment                    */
  --text-secondary:  #46464b;   /*  8.58:1                                 */
  --text-muted:      #77767b;   /*  4.12:1 — large text and non-text only  */

  /* ---- brand ---------------------------------------------------------- */
  --brand:           #006847;   /*  6.25:1 on parchment                    */
  --brand-deep:      #005238;
  --brand-wash:      rgba(0,104,71,0.07);
  --brand-border:    rgba(0,104,71,0.20);
  --on-brand:        #FFFFFF;   /*  6.84:1 on brand                        */

  /* ---- action --------------------------------------------------------- */
  /* Deliberately its own token even though it currently resolves to the
     brand. On the report canvas the brand emerald is also maturity level 5,
     so "the thing to click" and "a score of 5" are the same colour. That is
     accepted for now (decision D3); when a screen demonstrates the clash,
     changing these two lines is the whole fix. */
  --action:          var(--brand);
  --action-hover:    var(--brand-deep);
  --on-action:       var(--on-brand);

  /* ---- sage — the one supporting tint --------------------------------- */
  /* Kept as a flat tint. The brand guide's grain-texture rule is retired:
     it costs a texture layer on every surface and is invisible below 200px. */
  --sage:            #8DBA95;
  --sage-wash:       rgba(141,186,149,0.12);

  /* ---- semantic status ------------------------------------------------ */
  /* Success is a grassier green (hue 150) than the brand (hue 158) so a
     status chip never reads as a brand element. Green is over-subscribed in
     this system — brand, maturity ramp and success all want it — so the two
     success tones are the widest separation available at AA contrast. */
  --success:         #38AC5C;   /* fills, borders, icons                   */
  --success-ink:     #008033;   /*  4.64:1 — text weight                   */
  --warn:            #B45309;   /*  4.59:1                                 */
  --block:           #B42318;   /*  6.01:1                                 */
  --info:            #175CD3;   /*  5.47:1                                 */

  /* ---- assessment dimensions ------------------------------------------
     The colour IS the dimension — radar, mindmap, network, cards. Optimised
     for worst-case separation under normal, deuteranope and protanope
     vision (ΔE 11.2 / 10.6 / 10.5), inside a narrow chroma band so the seven
     read as one family. No green: that arc belongs to the brand and the
     maturity ramp, which is what keeps a categorical colour from ever being
     mistaken for a score. Import these; never re-declare them. */
  --dim-governance:  #B0554C;
  --dim-strategy:    #894103;
  --dim-programs:    #CB7933;
  --dim-financial:   #009B93;
  --dim-people:      #7682DC;
  --dim-monitoring:  #5B539F;
  --dim-external:    #8D305F;

  /* ---- maturity 1–5 — sequential, muted, ending on the brand ---------- */
  /* Low chroma throughout so the scale separates from the saturated status
     greens by chroma as well as lightness. */
  --maturity-1:      #E1EFE6;
  --maturity-2:      #C0D6C8;
  --maturity-3:      #9ABCA7;
  --maturity-4:      #71A084;
  --maturity-5:      #006847;

  /* ---- radius — four values, no more ---------------------------------- */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-pill:     999px;

  /* ---- shadows — feather-light, neutral ------------------------------- */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:       0 8px 30px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);

  /* ---- type ----------------------------------------------------------- */
  /* Inter first in both stacks so Latin text and digits are identical in
     every locale; the Arabic face picks up Arabic glyphs by per-glyph
     fallback. IBM Plex Sans Arabic is a grotesque like Inter and shares its
     vertical proportions — Tajawal is retired. */
  --font-sans:   'Inter', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* seven steps. Replaces the 21 sizes previously in use. */
  --text-xs:     0.75rem;      /* 12 */
  --text-sm:     0.875rem;     /* 14 */
  --text-base:   1rem;         /* 16 */
  --text-lg:     1.1875rem;    /* 19 */
  --text-xl:     1.375rem;     /* 22 */
  --text-2xl:    2rem;         /* 32 */
  --text-3xl:    3rem;         /* 48 */

  --leading-tight: 1.15;
  --leading-body:  1.55;
  --tracking-head: -0.01em;

  /* ---- spacing — 8px grid --------------------------------------------- */
  --space-unit:  0.5rem;

  /* ---- motion — state change only ------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;
}

/* ============================================================================
   DARK — the assessment app only.
   The landing page never sets data-theme and therefore never goes dark.
   ============================================================================ */
:root[data-theme="dark"] {
  --surface-bg:      #0E1512;   /* warm near-black, green-cast             */
  --surface-base:    #121A16;
  --surface-raised:  #15201B;
  --scrim:           rgba(0,0,0,0.88);

  --border-faint:    rgba(63,185,141,0.10);
  --border-subtle:   rgba(63,185,141,0.18);
  --border-default:  #243029;

  --text-primary:    #EAF2EE;   /* 16.25:1 on dark ground                  */
  --text-secondary:  #9FB2A8;   /*  8.29:1                                 */
  --text-muted:      #7A8D84;

  --brand:           #3FB98D;   /*  7.52:1                                 */
  --brand-deep:      #67CFA1;   /* hover goes lighter on dark, not darker  */
  --brand-wash:      rgba(63,185,141,0.10);
  --brand-border:    rgba(63,185,141,0.25);
  --on-brand:        #0E1512;

  --sage:            #8DBA95;
  --sage-wash:       rgba(141,186,149,0.10);

  --success:         #67D283;
  --success-ink:     #67D283;
  --warn:            #F5A855;
  --block:           #F58C7E;
  --info:            #7FA9F5;

  /* Same hues, lifted — the lightness LADDER is preserved rather than
     flattened to one "bright on dark" level, which is what dichromats fall
     back on when the hue axis is gone. */
  --dim-governance:  #F6887C;
  --dim-strategy:    #C36C31;
  --dim-programs:    #FFBE84;
  --dim-financial:   #4CDED4;
  --dim-people:      #BAC6FF;
  --dim-monitoring:  #8A83DE;
  --dim-external:    #C85B8F;

  /* ascends on dark instead of descending */
  --maturity-1:      #213328;
  --maturity-2:      #315842;
  --maturity-3:      #41815E;
  --maturity-4:      #51AC7C;
  --maturity-5:      #61D99A;

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg:       0 8px 30px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.35);

  color-scheme: dark;
}

/* ============================================================================
   Baseline behaviour every surface inherits.
   ============================================================================ */
:root[lang="ar"], [lang="ar"] {
  /* Arabic has no case, no letterspacing tradition, and taller
     ascenders/descenders than Latin — headings included, where 1.15 clips
     the descenders of a joined form. */
  --tracking-head:  0;
  --leading-body:   1.75;
  --leading-tight:  1.35;
}

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