/* ==========================================================================
   Dutch IX Labs — tokens-night.css
   SHEET 00 / NACHT. The cinematic build.

   The daylight sheet (tokens.css) is the country BEFORE it is built: ink on
   stock, a survey. This is the same country after dark and switched on. The
   orange is not the flag — it is sodium vapour, the light this country is
   actually lit by. That is the whole argument for an orange grade here.

   Rule, inherited: this file and this file only may contain a raw colour.
   Everything downstream references var(--c-...).

   Fonts are NOT redeclared — night.html loads tokens.css first for the
   @font-face block, the reset and the base element styles, then this file
   rebinds the world.

   Order:
     1. Raw palette
     2. Semantic tokens
     3. Lab theming
     4. Scene colours (read by JS, not by CSS)
     5. Type, space, motion
     6. Base rebind
     7. User-preference overrides
   ========================================================================== */


/* ==========================================================================
   1. RAW PALETTE — never referenced downstream.
   Every text-capable value carries its measured ratio on --p-ground.
   ========================================================================== */

:root {

  /* ---- 1.1 Ground — four warm near-blacks. Never #000: the key light is
     sodium, and a cold ground under a warm key reads as a colour error.
     The steps are close on purpose. On a dark page depth is carried by
     light and hairline, not by a staircase of greys.                     */
  --p-void:   #070504;  /* outside the picture: letterbox, backdrop, focus halo */
  --p-ground: #100C09;  /* the page ground */
  --p-up:     #1C1712;  /* panels, dossier, nav */
  --p-lift:   #2A211A;  /* the one raised surface: active row, input, chip */

  /* ---- 1.2 Text — warm neutrals. Never #FFF: pure white on a warm dark
     ground is the commonest tell of an ungraded page.                    */
  --p-text:   #FFF6EE;  /* 18.24 on ground — display, claims, title card */
  --p-text-2: #EADCD0;  /* 14.51 — body, dossier prose */
  --p-text-3: #BCA898;  /*  8.52 — secondary, captions, tag lists */
  --p-text-4: #9B8A7B;  /*  5.86 — meta, legal. 4.74 on lift: the floor */

  /* ---- 1.3 Orange — the signal hue. --------------------------------- */
  --p-orange:       #FF8A1E;  /* 8.26 — primary signal, network, CTA, active */
  --p-orange-deep:  #E0670F;  /* 5.67 — pressed, dense fills, rules at scale */
  --p-orange-ember: #FF5A2B;  /* 6.26 — the hot end; also IX3 */

  /* ---- 1.4 The counter-hue. The classic orange-and-teal grade, handled
     by putting the cold in the shadow and the distance, not in the UI.
     Exactly three cold values, one of which is text.                     */
  --p-steel-deep: #0E1A1D;  /* fog, distance, sea body. Never text */
  --p-steel:      #33555E;  /* the cold hairline: graticule, horizon. Non-text */
  --p-steel-lit:  #8FB6BE;  /* 8.90 — TEXT, and reserved: measured values only */

  /* ---- 1.5 The five labs — derivatives of one orange, told apart by
     temperature, value and saturation. No two are separated by hue alone,
     and every lab also owns a distinct silhouette class.                 */
  --p-ix3:   #FF5A2B;  /* 6.26 — ember.  Hottest. Spectacle, crowd, a stage lamp at full */
  --p-mix:   #FF8A1E;  /* 8.26 — amber.  The reference value: MIX is the origin of every conduit */
  --p-prime: #FFC27A;  /* 12.28 — sodium. Palest, least saturated. A stadium floodlight */
  --p-brix:  #D07D48;  /* 6.22 — copper. Darkest and dullest. Workshop, unfinished */
  --p-shine: #EFC04A;  /* 11.41 — gold.  The yellow end. Harbour lamp, civic */

  /* ---- 1.6 Line, focus, alert --------------------------------------- */
  --p-hair: #3A2F24;  /* 1.49 — decorative reinforcement ONLY */
  --p-rule: #8A7565;  /* 4.46 on ground, 3.62 on lift — every border that means something */

  /* Two-tone focus, inverted from the daylight sheet: a light core carries
     the dark grounds, a void halo carries the saturated accent fills where
     a white ring measures 1.48 and fails. */
  --p-focus-core: #FFF6EE;  /* 14.78–19.05 on every ground */
  --p-focus-halo: #070504;  /*  6.50–12.83 on every lab accent */

  /* The only non-orange chroma on the page. Form validation only, and
     always with an icon: in an orange world a red alert cannot survive as
     colour alone. */
  --p-alert: #FF6666;  /* 6.81 on ground */
}


/* ==========================================================================
   2. SEMANTIC TOKENS — everything downstream uses these and nothing else.
   ========================================================================== */

:root {

  /* surfaces */
  --c-void:        var(--p-void);
  --c-ground:      var(--p-ground);
  --c-ground-up:   var(--p-up);
  --c-ground-lift: var(--p-lift);

  /* text */
  --c-text:   var(--p-text);
  --c-text-2: var(--p-text-2);
  --c-text-3: var(--p-text-3);
  --c-text-4: var(--p-text-4);

  /* The instrument register. Warm type argues, cold type measures — this is
     the semantic rule that stops the teal from becoming decoration. */
  --c-instrument: var(--p-steel-lit);

  /* signal */
  --c-signal:      var(--p-orange);
  --c-signal-deep: var(--p-orange-deep);
  --c-signal-hot:  var(--p-orange-ember);

  /* text sitting ON a saturated accent fill. 6.22–12.28 on all five. */
  --c-on-accent: var(--p-void);

  /* labs */
  --c-ix3:   var(--p-ix3);
  --c-mix:   var(--p-mix);
  --c-prime: var(--p-prime);
  --c-brix:  var(--p-brix);
  --c-shine: var(--p-shine);

  /* Aliases. Components reference these; [data-lab] rebinds them. The
     default is lab-neutral — no place means no accent, exactly as on the
     daylight sheet. */
  --c-lab:      var(--c-text-3);
  --c-lab-glow: var(--c-signal);

  /* line */
  --c-hair: var(--p-hair);
  --c-rule: var(--p-rule);
  --c-cold: var(--p-steel);

  /* state */
  --c-focus-core: var(--p-focus-core);
  --c-focus-halo: var(--p-focus-halo);
  --c-alert:      var(--p-alert);

  color-scheme: dark;
}


/* ==========================================================================
   3. LAB THEMING
   ========================================================================== */

[data-lab="ix3"]   { --c-lab: var(--c-ix3); }
[data-lab="mix"]   { --c-lab: var(--c-mix); }
[data-lab="prime"] { --c-lab: var(--c-prime); }
[data-lab="brix"]  { --c-lab: var(--c-brix); }
[data-lab="shine"] { --c-lab: var(--c-shine); }


/* ==========================================================================
   4. SCENE COLOURS
   Not UI tokens: JS reads these off :root and hands them to three.js, which
   keeps the one-file colour rule true for the 3D as well as the DOM.
   ========================================================================== */

:root {
  --c-slab-top:   #0B1114;  /* the landmass, lit face. Matte */
  --c-slab-side:  #0D0A08;  /* the extrusion wall */
  --c-sea:        #060B0F;  /* the only glossy surface on the page */
  --c-fog:        #0B0F12;  /* cold: the distance goes cold, the foreground stays warm */
  --c-sky-top:    #22303A;  /* environment ramp only, never rendered as a visible gradient */
  --c-sky-bottom: #2A170A;
  --c-building:   #070809;  /* buildings are dark objects that are LIT, never objects that emit */

  /* Inside a lab. Same rule as outside: the shell is dark and the only bright
     things in the room are the light fittings. */
  --c-room-wall:    #0F1316;
  --c-room-floor:   #080B0D;  /* the one surface with a sheen, so the fittings reflect down it */
  --c-room-ceiling: #070909;  /* darker than the walls — a lit ceiling flattens a room */
}


/* ==========================================================================
   5. TYPE, SPACE, MOTION
   The scale is inherited from tokens.css. What changes here is what has to
   change because the ground went from light to dark.
   ========================================================================== */

:root {

  /* Light letterforms on a dark ground bloom optically and read wider.
     Narrowing two steps restores the drawn proportion; the tracking does the
     same job on the sidebearings. This is the difference between "a dark
     website" and "a title card". */
  --wdth-display: 68;
  --wdth-annot:   78;

  --track-d1:  -0.014em;
  --lh-d1:      0.84;

  /* Camera easings. No springs, no bounce, no overshoot anywhere: a crane
     weighs 200 kg and a grip's whole job is that it does not bounce. */
  --ease-dolly: cubic-bezier(0.32, 0.00, 0.12, 1.00);
  --ease-rack:  cubic-bezier(0.50, 0.00, 0.20, 1.00);
  --ease-cut:   cubic-bezier(0.85, 0.00, 0.15, 1.00);
  --ease-land:  cubic-bezier(0.16, 0.84, 0.24, 1.00);
  --ease-flow:  linear;

  --t-1: 90ms;   --t-2: 160ms;  --t-3: 260ms;  --t-4: 420ms;
  --t-5: 640ms;  --t-6: 1100ms;

  /* One camera flight, any distance. Constant, not distance-scaled: a
     distance-scaled flight makes the near labs feel snappy and the far ones
     feel broken. Constant reads as one camera with one operator. */
  --t-fly:   1400ms;
  --t-title: 2600ms;
  --stagger:   90ms;

  /* The DOM grade. */
  --grade-vignette: radial-gradient(118% 88% at 50% 44%,
                      transparent 0 55%,
                      color-mix(in srgb, var(--c-void) 62%, transparent) 100%);
  --grade-grain: 0.045;

  --panel-blur: 18px;

  --z-below: -1;  --z-canvas: 1;  --z-grade: 5;   --z-content: 10;
  --z-hud:   20;  --z-nav:    60; --z-overlay: 80; --z-modal: 90; --z-skip: 100;
}

:lang(nl) { --wdth-display: 58; --wdth-annot: 70; }
:lang(en) { --wdth-display: 68; --wdth-annot: 78; }


/* ==========================================================================
   6. BASE REBIND
   tokens.css already set the reset and the element defaults against the
   light sheet. These are the elements whose colour has to move.
   ========================================================================== */

html, body { background-color: var(--c-ground); }

body {
  color: var(--c-text-2);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

h1, h2, h3 { color: var(--c-text); }
h4, h5, h6 { color: var(--c-text); }

/* 600 on black is a shout. */
strong, b { font-weight: 500; color: var(--c-text); }

a { color: var(--c-lab); }

hr { border-block-start: 1px solid var(--c-hair); }

::selection { background-color: var(--c-signal); color: var(--c-on-accent); }

::-webkit-scrollbar { inline-size: 12px; block-size: 12px; }
::-webkit-scrollbar-track { background-color: var(--c-void); }
::-webkit-scrollbar-thumb {
  background-color: var(--c-hair);
  border: 3px solid var(--c-void);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--c-rule); }
html { scrollbar-color: var(--c-hair) var(--c-void); scrollbar-width: thin; }

:focus-visible {
  outline: 2px solid var(--c-focus-core);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--c-focus-halo);
  border-radius: 0;
}

/* The night build draws in WebGL. The daylight sheet's blanket canvas ban is
   the one inherited rule that has to be lifted here, and only here. */
canvas { display: block !important; }


/* ==========================================================================
   7. USER-PREFERENCE OVERRIDES
   ========================================================================== */

/* Reduced motion removes MOVES. It does not remove the GRADE: grain,
   vignette, fog and bloom are not motion, and stripping them punishes a user
   for a preference they did not express. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
    --t-1: 1ms; --t-2: 1ms; --t-3: 1ms; --t-4: 1ms;
    --t-5: 120ms; --t-6: 120ms;
    --t-fly: 1ms;
    --stagger: 0ms;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .panel, .dossier, .night-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--c-ground-up) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --c-text-4: var(--p-text-3);
    --c-hair:   var(--p-rule);
  }
  :focus-visible { outline-width: 3px; box-shadow: 0 0 0 6px var(--c-focus-halo); }
}

/* The system owns colour. The canvas carries no meaning the list does not
   also carry, so it goes entirely. */
@media (forced-colors: active) {
  :root {
    --c-lab: CanvasText;
    --c-signal: CanvasText;
    --c-on-accent: Canvas;
  }
  .night-stage, .grade { display: none !important; }
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

@media print {
  .night-stage, .grade { display: none !important; }
  body { background: #FFFFFF; color: #1A1A1A; }
}