/* Noologia design tokens — contract version 1.
   Single source of visual truth for every surface, in every presentation mode:
   document, screen-2d, screen-3d, and later in-scene immersive layers.
   Components declare no literal colour, size or duration; they read tokens.

   The atmosphere behind the glass is rendered by WebGPU — sky, clouds, mist,
   glow. The DOM contributes the glass only, so panels must stay legible over
   any scene. That is why every panel carries an opaque tint floor: blur is
   decoration, never the thing that makes text readable. */
:root {
  /* -- type ------------------------------------------------------------- */
  --type-prose: ui-sans-serif, system-ui, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --type-data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --size-100: 12px; --size-200: 12px; --size-300: 13.5px;
  --size-400: 15px; --size-500: 19px; --size-600: 25px;
  --weight-regular: 400; --weight-medium: 500; --weight-strong: 600;

  --line-tight: 1.3; --line-body: 1.6; --line-data: 1.7;
  --track-label: 0.08em; --track-brand: 0.18em;

  /* -- space and shape --------------------------------------------------- */
  --space-0: 2px;
  --space-1: 4px;  --space-2: 7px;  --space-3: 10px;
  --space-4: 14px; --space-5: 18px; --space-6: 26px; --space-7: 40px;
  --radius-1: 10px; --radius-2: 18px; --radius-3: 26px; --radius-pill: 999px;

  /* -- control metrics --------------------------------------------------- */
  --control-sm: 26px;   /* close button, dock glyph */
  --control-md: 28px;   /* window close */
  --control-lg: 30px;   /* launcher glyph */
  --control-xl: 52px;   /* collapsed launcher */
  --resize-hit: 44px;
  --task-pill-max: 176px;
  --meter-size: 104px;  /* circular meter box */
  --meter-stroke: 9px;
  --track-height: 6px;  /* progress track */
  --slider-thumb: 16px;
  --scrollbar-size: 6px;
  --wave-height: 44px;
  --wave-live-height: 72px;
  --check-size: 15px;
  --hairline: 1px;
  --launch-width: 216px;
  --rail-width: 300px;    /* reference B right column */
  --document-width: 780px;
  --dock-segment-min: 156px;
  --dock-menu-width: 224px;
  --dock-panel-width: 420px; /* D-089 launcher of pills */
  /* D-089 ring menu: item target, core disc, label widths, glow. The radii
     themselves are gesture mechanics in radial-menu.js (RING_OUTER_PX). */
  --ring-item: max(var(--resize-hit), 56px);
  --ring-core: 100px;
  --ring-title-max: 84px;
  --ring-label-max: 92px;
  --ring-glow-width: 10px;
  --ring-glow-blur: 6px;
  --nudge: 1px;         /* hover lift */

  /* -- world landmarks (projected markers over the canvas) --------------- */
  /* Warm ink that stays legible over the dark field and the luminous deck. */
  --landmark-ink: #fff0c8;
  --landmark-ring: #ffe1a0;
  --landmark-ring-glow: #ffe1a033;
  --landmark-ring-faint: #ffe1a066;
  --landmark-veil: #080c18c7;
  --landmark-halo: #080c18b3;
  --layer-controls: 60;

  /* -- pastel accent ramp ------------------------------------------------ */
  /* Six hues, used for identity and state, never for decoration alone. */
  --hue-rose: #f2c4c0;
  --hue-peach: #f6d3b3;
  --hue-lavender: #cdc4e6;
  --hue-mist: #cdd8ea;
  --hue-mint: #bfe0d2;
  --hue-gold: #ffd9a0;

  --accent: var(--hue-peach);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-edge: color-mix(in srgb, var(--accent) 40%, transparent);
  --focus: var(--hue-mist);

  /* Semantic states stay separate from identity accents. */
  --state-ok: #a9dcc4; --state-warn: #f0c479; --state-danger: #f2a3ad;

  /* -- elevation and motion ---------------------------------------------- */
  --veil-1: blur(20px) saturate(1.10);
  --veil-2: blur(30px) saturate(1.16);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%);
  --focus-ring: 2px solid var(--focus);
  --enhanced-edge: 2px solid currentColor;
  --enhanced-focus: 3px double currentColor;
  --focus-offset: 2px;
  --motion-fast: 0.18s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* ---- scene scopes -------------------------------------------------------
   The panel language is one. Only the floor and the ink change with the scene
   the engine is rendering behind it. */

/* Dark field: galactic and interstellar scales. */
:root, [data-scene="dark"] {
  --ground: #05070d;
  --ground-doc: #080b13;
  --surface: rgba(14, 19, 31, 0.86);
  --surface-raised: rgba(20, 27, 42, 0.92);
  --surface-inset: rgba(0, 0, 0, 0.32);
  --surface-control: rgba(255, 255, 255, 0.06);
  --surface-opaque: #0e1320;
  --ink: rgba(240, 245, 253, 0.94);
  --ink-muted: rgba(200, 214, 234, 0.82);
  --ink-faint: rgba(186, 202, 224, 0.78);
  --edge: rgba(255, 255, 255, 0.10);
  --edge-strong: rgba(255, 255, 255, 0.20);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.55);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 26px 64px rgba(0, 0, 0, 0.62);
}

/* Luminous field: atmosphere, cloud deck, dawn, planetary ground. Ready for
   the WebGPU cloud and atmosphere orchestrators. */
[data-scene="luminous"] {
  --accent: #56358a; --accent-soft: #e6dcf5; --focus: #442276;
  --state-ok: #145437; --state-warn: #704900; --state-danger: #8c1e36;
  --ground: #cfd6e6;
  --ground-doc: #eef1f7;
  --surface: rgba(222, 204, 214, 0.58);
  --surface-raised: rgba(232, 216, 224, 0.68);
  --surface-inset: rgba(255, 246, 250, 0.22);
  --surface-control: rgba(255, 246, 250, 0.28);
  --surface-opaque: #deccd6;
  --ink: rgba(29, 23, 40, 0.97);
  --ink-muted: rgba(51, 42, 63, 0.91);
  --ink-faint: rgba(69, 57, 79, 0.84);
  --edge: rgba(255, 248, 252, 0.54);
  --edge-strong: rgba(255, 250, 253, 0.82);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 18px 44px rgba(42, 27, 45, 0.20);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 26px 60px rgba(42, 27, 45, 0.26);
  color-scheme: light;
}

/* Removing the blur must not reduce legibility, so every translucent surface
   token becomes opaque here — not just the panel background. */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-scene="dark"] {
    --surface: #0e1320;
    --surface-raised: #141b2a;
    --surface-inset: #070a12;
    --surface-control: #1a2233;
    --veil-1: none; --veil-2: none; --sheen: none;
  }
  [data-scene="luminous"] {
    --surface: #d8c7cd;
    --surface-raised: #e1d2d7;
    --surface-inset: #cbb7bf;
    --surface-control: #d7c5cb;
    --veil-1: none; --veil-2: none; --sheen: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; }
}

/* Explicit accessibility preferences complement the system media queries.
   `system` is represented by the absence of an attribute, so the browser
   remains the authority until the person chooses an override. */
:root[data-a11y-motion="reduce"] { --motion-fast: 0s; }

:root[data-a11y-transparency="reduce"],
:root[data-a11y-transparency="reduce"] [data-scene="dark"] {
  --surface: #0e1320;
  --surface-raised: #141b2a;
  --surface-inset: #070a12;
  --surface-control: #1a2233;
  --veil-1: none; --veil-2: none; --sheen: none;
}
:root[data-a11y-transparency="reduce"] [data-scene="luminous"] {
  --surface: #d8c7cd;
  --surface-raised: #e1d2d7;
  --surface-inset: #cbb7bf;
  --surface-control: #d7c5cb;
  --veil-1: none; --veil-2: none; --sheen: none;
}

:root[data-a11y-text-scale="125"] {
  --size-100: 15px; --size-200: 15px; --size-300: 16.875px;
  --size-400: 18.75px; --size-500: 23.75px; --size-600: 31.25px;
}
:root[data-a11y-text-scale="150"] {
  --size-100: 18px; --size-200: 18px; --size-300: 20.25px;
  --size-400: 22.5px; --size-500: 28.5px; --size-600: 37.5px;
}
:root[data-a11y-text-scale="200"] {
  --size-100: 24px; --size-200: 24px; --size-300: 27px;
  --size-400: 30px; --size-500: 38px; --size-600: 50px;
}

:root[data-a11y-target-scale="125"] {
  --control-sm: 32.5px; --control-md: 35px; --control-lg: 37.5px;
  --control-xl: 65px; --resize-hit: 55px;
  --check-size: 18.75px; --slider-thumb: 20px;
}
:root[data-a11y-target-scale="150"] {
  --control-sm: 39px; --control-md: 42px; --control-lg: 45px;
  --control-xl: 78px; --resize-hit: 66px;
  --check-size: 22.5px; --slider-thumb: 24px;
}