/* ==========================================================================
   Juno design tokens — "technical instrument"
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, and rules.
   Components must reference these variables; no literal hex, px font size,
   or ad-hoc spacing belongs in a component stylesheet.

   Constraints this file encodes:
     - warm paper background, true-black ink, light mode primary
     - exactly one accent colour, used for links / active / focus only
     - monospace for chrome and metadata, serif for reading text
     - square corners, 1px hairline rules, zero elevation
     - 4px baseline grid
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------ paper
     Surfaces. "sunken" is for recessed wells (inputs, code blocks, table
     stripes); "raised" exists only to lift a field off the page and carries
     no shadow. There is no translucent surface. */
  --paper: #faf9f6;
  --paper-sunken: #f2f0ea;
  --paper-raised: #ffffff;

  /* -------------------------------------------------------------------- ink
     Text. Three steps only: body, secondary, and metadata. */
  --ink: #111111;
  --ink-muted: #5a564e;
  --ink-faint: #8a857b;
  --ink-inverse: #faf9f6;

  /* ------------------------------------------------------------------ rules
     Hairlines divide space. `--rule` is the default; `--rule-strong` marks a
     structural boundary (section edge, table header) or a hovered control. */
  --rule: #ddd9d2;
  --rule-strong: #c4bfb5;
  --rule-width: 1px;

  /* ----------------------------------------------------------------- accent
     ONE colour. Oxblood/rust. Links, active navigation, focus outline, and
     the caret. Swap this single pair to move the whole app to ink blue
     (#1b3a6b / #14294a). Never used as a fill behind large areas. */
  --accent: #a33b20;
  --accent-strong: #7d2c16;
  --accent-wash: #f4e8e3;

  /* ----------------------------------------------------------------- status
     Functional only, and only where a text label is insufficient. Rendered
     as a 6px solid square plus a word — never a pill, never a pulse. */
  --status-ok: #3f6b3a;
  --status-warn: #8a6a1f;
  --status-bad: #8c2a16;
  --status-idle: var(--ink-faint);

  /* ------------------------------------------------------------------- type
     Mono carries all UI chrome: labels, buttons, navigation, metadata,
     timestamps, counts, IDs. Serif carries prose: message bodies, memory
     entries, descriptions. Nothing else. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-ui: var(--font-mono);
  --font-prose: var(--font-serif);

  /* Type scale. Tight, print-derived, no step wasted. */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 25px;
  --text-3xl: 31px;

  --leading-flat: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-prose: 1.62;

  /* Mono needs no weight above 500; serif reads at 400/600. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tracking. Mono at small sizes tightens slightly; display serif tightens.
     There is no positive tracking token, because there are no small-caps
     letter-spaced headers. */
  --tracking-tight: -0.01em;
  --tracking-none: 0;

  --measure: 68ch;

  /* ------------------------------------------------------------------ space
     Strict 4px baseline grid. Named by multiplier, not by t-shirt size, so
     vertical rhythm is verifiable by reading the number. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout constants, all grid multiples. */
  --gutter: var(--space-4);
  --pad-panel: var(--space-4);
  --pad-panel-tight: var(--space-3);
  --nav-height: 40px;
  --col-side: 264px;
  --col-aside: 288px;

  /* --------------------------------------------------------------- geometry
     Square by default. `--radius-sm` is the only concession, reserved for
     inline code and keycaps. */
  --radius: 0;
  --radius-sm: 2px;

  /* Control heights on the 4px grid. */
  --control-h: 28px;
  --control-h-sm: 24px;
  --control-h-lg: 32px;

  /* Fixed marks: status square, colour swatch, checkbox, avatar square. */
  --mark-status: 6px;
  --mark-swatch: 8px;
  --mark-check: 13px;
  --avatar-size: 24px;

  /* ------------------------------------------------------------- elevation
     None. Declared as a token so that a component reaching for depth has
     something to reference and still get nothing. */
  --shadow: none;

  /* Focus is an outline, not a shadow, so it costs no elevation. */
  --focus-width: 2px;
  --focus-offset: 1px;

  /* ------------------------------------------------------------- motion
     Colour transitions only. No transform, no opacity pulse, no shimmer. */
  --duration-fast: 80ms;
  --duration: 140ms;
  --ease: linear;

  /* --------------------------------------------------------------- z-index */
  --z-base: 1;
  --z-nav: 10;
  --z-overlay: 20;
  --z-tooltip: 30;
  --z-toast: 40;

  /* ----------------------------------------------------- categorical data
     Eighteen knowledge graphs need eighteen distinguishable marks. This is
     data encoding, not decoration, so it is the one place with more than one
     hue — held to a single desaturated printer's-ink family at roughly equal
     lightness so no graph shouts louder than another. */
  --data-01: #8c6239;
  --data-02: #4a6b3d;
  --data-03: #2f5d6b;
  --data-04: #7a4b62;
  --data-05: #8a6a1f;
  --data-06: #4c4a72;
  --data-07: #a0503c;
  --data-08: #5a6b33;
  --data-09: #35695c;
  --data-10: #6b5b4a;
  --data-11: #8a4a3a;
  --data-12: #6b3f7a;
  --data-13: #57616b;
  --data-14: #7a6b2f;
  --data-15: #3e5a7a;
  --data-16: #6b3f4a;
  --data-17: #4f6b52;
  --data-18: #5c4f3a;
  --data-default: #6b675f;

  /* Scene colours for the three.js stage, kept with the data tokens so the
     canvas and the DOM never drift apart. */
  --scene-bg: var(--paper);
  --scene-fog: #efece5;
  --scene-dim: #cfcbc2;
  --scene-highlight: #111111;
}

/* ==========================================================================
   Dark mode — warm charcoal, never blue-black. Opt-in via
   <html data-theme="dark">, with `prefers-color-scheme` honoured only when
   the document has not pinned a theme.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #1c1b19;
  --paper-sunken: #151413;
  --paper-raised: #232220;

  --ink: #f0ede6;
  --ink-muted: #a8a29a;
  --ink-faint: #7a756c;
  --ink-inverse: #1c1b19;

  --rule: #33312d;
  --rule-strong: #4a4741;

  --accent: #c9563a;
  --accent-strong: #e06b4d;
  /* Mid rust — must clear paper/paper-raised so ::selection stays visible. */
  --accent-wash: #6b3a2e;

  --status-ok: #7fa877;
  --status-warn: #c2a24f;
  --status-bad: #cc6a52;

  --data-01: #c39a69;
  --data-02: #8fb37f;
  --data-03: #6fa3b3;
  --data-04: #bb8ba0;
  --data-05: #c8ab5e;
  --data-06: #8f8cbb;
  --data-07: #d1917c;
  --data-08: #9db370;
  --data-09: #6fb0a0;
  --data-10: #b0a08c;
  --data-11: #cc8b78;
  --data-12: #a883bb;
  --data-13: #98a2ad;
  --data-14: #bcac74;
  --data-15: #7f9cbd;
  --data-16: #bb8391;
  --data-17: #8fb394;
  --data-18: #b09a78;
  --data-default: #9a958c;

  --scene-fog: #171614;
  --scene-dim: #3a3833;
  --scene-highlight: #f0ede6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --paper: #1c1b19;
    --paper-sunken: #151413;
    --paper-raised: #232220;

    --ink: #f0ede6;
    --ink-muted: #a8a29a;
    --ink-faint: #7a756c;
    --ink-inverse: #1c1b19;

    --rule: #33312d;
    --rule-strong: #4a4741;

    --accent: #c9563a;
    --accent-strong: #e06b4d;
    --accent-wash: #6b3a2e;

    --status-ok: #7fa877;
    --status-warn: #c2a24f;
    --status-bad: #cc6a52;

    --scene-fog: #171614;
    --scene-dim: #3a3833;
    --scene-highlight: #f0ede6;
  }
}

/* ==========================================================================
   Reduced motion — the design has almost none, so this simply removes the
   remaining colour transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}