/* ===========================================================================
   NOIR CHROMA — Design Tokens
   ---------------------------------------------------------------------------
   ONE token namespace (--n-*) for the whole public site, replacing the four
   competing systems that grew over time (--c-* in style.css, --c-* again in
   skins/immersive, --mr-* in mobile-redesign.css, and per-page :root blocks).

   Everything is scoped to body[data-skin="noir"] (specificity 0-1-1) so it
   outranks every :root declaration — including the critical inline <style>
   block in inc/header.php, which no external :root could ever beat.

   Section E at the bottom is the compatibility bridge: it re-points the legacy
   --c-* names at noir values, which flips the majority of the existing page
   CSS to dark without touching a single one of those files.
   =========================================================================== */

body[data-skin="noir"] {

  /* ---- A. Primitives ---------------------------------------------------- */

  /* Ink ramp — the canvas. ink-0 is the page, higher numbers step forward. */
  --n-ink-0: #0B0B0D;
  --n-ink-1: #0E0E11;
  --n-ink-2: #121215;
  --n-ink-3: #17171B;
  --n-ink-4: #1E1E23;
  --n-ink-5: #26262C;

  /* Foreground ramp */
  --n-fg:    #F5F3F0;
  --n-fg-2:  #A09B95;   /* 8.4:1 on ink-0 */
  --n-fg-3:  #6E6A66;   /* decorative / disabled only — never body copy */

  /* Brand chroma — lifted from logo/logofot.png */
  --n-pink:   #FF3D8B;
  --n-amber:  #FF8A3D;
  --n-violet: #8B5CF6;

  --n-grad: linear-gradient(120deg, #FF3D8B 0%, #FF8A3D 50%, #8B5CF6 100%);
  --n-grad-soft: linear-gradient(120deg,
                   rgba(255, 61, 139, .16) 0%,
                   rgba(255, 138, 61, .12) 50%,
                   rgba(139, 92, 246, .16) 100%);
  --n-grad-line: linear-gradient(90deg,
                   rgba(255, 61, 139, .00) 0%,
                   rgba(255, 61, 139, .55) 25%,
                   rgba(255, 138, 61, .55) 50%,
                   rgba(139, 92, 246, .55) 75%,
                   rgba(139, 92, 246, .00) 100%);

  /* Solid fallback for anything that needs a single colour value:
     currentColor-driven SVG, caret-color, outline, border-color. */
  --n-accent: #FF3D8B;

  --n-danger:  #FF5C6C;
  --n-success: #3DD9A0;
  --n-warning: #FFB43D;


  /* ---- B. Semantic ------------------------------------------------------ */

  --n-bg:            var(--n-ink-0);
  --n-surface:       var(--n-ink-2);
  --n-surface-2:     var(--n-ink-3);
  --n-surface-hover: var(--n-ink-4);
  --n-elev:          var(--n-ink-4);   /* popovers, dropdown panels, modals */

  --n-text:       var(--n-fg);
  --n-text-muted: var(--n-fg-2);
  --n-text-dim:   var(--n-fg-3);
  --n-on-accent:  var(--n-ink-0);      /* text that sits ON the gradient */

  --n-border:        rgba(245, 243, 240, .10);
  --n-border-strong: rgba(245, 243, 240, .20);
  --n-focus:         var(--n-accent);
  --n-scrim:         rgba(6, 6, 8, .82);


  /* ---- C. Geometry, type, motion ---------------------------------------- */

  --n-r-xs:   4px;
  --n-r-sm:   8px;
  --n-r-md:   12px;
  --n-r-lg:   18px;
  --n-r-xl:   26px;
  --n-r-pill: 999px;

  /* 4-pt spacing scale */
  --n-s1: 4px;
  --n-s2: 8px;
  --n-s3: 12px;
  --n-s4: 16px;
  --n-s5: 24px;
  --n-s6: 32px;
  --n-s7: 48px;
  --n-s8: 72px;

  /* Fluid type — no per-breakpoint font-size overrides anywhere in the skin */
  --n-fz-xs:   .75rem;
  --n-fz-sm:   .8125rem;
  --n-fz-base: 1rem;
  --n-fz-lg:   1.0625rem;
  --n-fz-xl:   clamp(1.25rem, 1.05rem + .7vw,  1.5rem);
  --n-fz-2xl:  clamp(1.5rem,  1.2rem  + 1.2vw, 2rem);
  --n-fz-3xl:  clamp(2rem,    1.5rem  + 2.2vw, 3rem);
  --n-fz-4xl:  clamp(2.5rem,  1.7rem  + 3.6vw, 4.5rem);

  --n-lh-tight: 1.15;
  --n-lh-snug:  1.35;
  --n-lh-body:  1.65;
  --n-lh-read:  1.8;

  --n-fw-reg:   400;
  --n-fw-med:   500;
  --n-fw-semi:  600;
  --n-fw-bold:  700;
  --n-fw-black: 800;

  --n-tracking-wide: .06em;

  /* Shadows read as almost nothing on black — the skin leans on hairline
     borders and the glow instead, and keeps these for depth under overlays. */
  --n-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --n-sh-2: 0 8px 24px rgba(0, 0, 0, .50);
  --n-sh-3: 0 24px 64px rgba(0, 0, 0, .65);
  --n-glow: 0 0 0 1px rgba(255, 61, 139, .35), 0 8px 32px rgba(139, 92, 246, .18);

  --n-dur-fast: 120ms;
  --n-dur:      220ms;
  --n-dur-slow: 420ms;
  --n-ease:      cubic-bezier(.22, .61, .36, 1);
  --n-ease-emph: cubic-bezier(.16, 1, .3, 1);
  --n-ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* Rubik carries Hebrew glyphs. A Latin-only display face would silently
     drop Hebrew headings back to the body font on a Hebrew-first site. */
  --n-font-display: 'Rubik', 'Heebo', system-ui, -apple-system, sans-serif;
  --n-font-body:    'Heebo', system-ui, -apple-system, sans-serif;


  /* ---- D. Layout -------------------------------------------------------- */

  --n-header-h:    72px;
  --n-bottomnav-h: 62px;
  --n-maxw:        1600px;
  --n-maxw-read:   68ch;
  --n-gutter:      clamp(16px, 3vw, 32px);

  --n-safe-top:    env(safe-area-inset-top, 0px);
  --n-safe-bottom: env(safe-area-inset-bottom, 0px);
  --n-safe-left:   env(safe-area-inset-left, 0px);
  --n-safe-right:  env(safe-area-inset-right, 0px);


  /* ---- E. Compatibility bridge ------------------------------------------ */
  /* The 13 existing page stylesheets consume var(--c-*) heavily. Re-pointing
     those names flips most of the site to dark for free; only rules that
     hard-code a hex need an explicit override in global.css / the page files.
     --mr-* is deliberately NOT bridged: mobile-redesign.css is not loaded for
     this skin, so a bridge would be dead weight and would mask a mistake if
     the legacy layer ever leaked back in. */

  --c-bg:            var(--n-bg);
  --c-surface:       var(--n-surface);
  --c-text:          var(--n-text);
  --c-text-muted:    var(--n-text-muted);
  --c-primary:       var(--n-accent);
  --c-primary-hover: var(--n-violet);
  --c-danger:        var(--n-danger);
  --c-success:       var(--n-success);
  --c-border:        var(--n-border);
  --c-input-bg:      var(--n-surface-2);

  --radius-sm: var(--n-r-xs);
  --radius-md: var(--n-r-sm);
  --radius-lg: var(--n-r-md);
  --radius-xl: var(--n-r-lg);

  --shadow-sm: var(--n-sh-1);
  --shadow-md: var(--n-sh-2);
  --shadow-lg: var(--n-sh-2);
  --shadow-xl: var(--n-sh-3);

  --font-main: var(--n-font-body);
  --max-w:     var(--n-maxw);
  --header-h:  var(--n-header-h);

  /* Native form controls, scrollbars and the like should render dark.
     This is an unconditional declaration, not a prefers-color-scheme rule,
     so it does not re-enter the media-query path that the five
     `and (min-width: 99999px)` sentinels elsewhere were built to disarm. */
  color-scheme: dark;
}

/* Read the gradient in the same direction as the text. */
html[dir="rtl"] body[data-skin="noir"] {
  --n-grad: linear-gradient(240deg, #FF3D8B 0%, #FF8A3D 50%, #8B5CF6 100%);
  --n-grad-soft: linear-gradient(240deg,
                   rgba(255, 61, 139, .16) 0%,
                   rgba(255, 138, 61, .12) 50%,
                   rgba(139, 92, 246, .16) 100%);
}