/**
 * Design tokens.
 *
 * Strictly monochrome: every colour is a neutral. There is no hue anywhere in
 * this file, which means state cannot be signalled by colour alone — warnings
 * and errors are carried by weight, hatching and motion instead.
 *
 * Two themes. Dark is the default; light is applied either by an explicit
 * [data-theme="light"] or by the OS preference when the user has not chosen.
 * Every token is defined in both, so nothing falls back to an inherited value.
 */

:root {
  /* ── Greyscale ramp — dark ──────────────────────────────── */
  --ink-000: #050506;
  --ink-050: #08080a;
  --ink-100: #0d0d10;
  --ink-150: #131317;
  --ink-200: #1a1a1f;
  --ink-300: #26262c;
  --ink-400: #3a3a42;
  --ink-500: #55555f;
  --ink-600: #74747e;
  --ink-700: #9a9aa2;
  --ink-800: #c8c8cc;
  --ink-900: #ebebe9;
  --ink-999: #ffffff;

  --bg: var(--ink-050);
  --bg-raised: var(--ink-100);
  --bg-card: var(--ink-150);
  --bg-inset: var(--ink-000);

  --fg: var(--ink-900);
  --fg-muted: var(--ink-700);
  --fg-faint: var(--ink-600);

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-bright: rgba(255, 255, 255, 0.28);

  /* Scrim behind the floating overlays, so text stays legible over the plane. */
  --veil: rgba(8, 8, 10, 0.82);
  --veil-soft: rgba(8, 8, 10, 0.55);

  /* ── Canvas ─────────────────────────────────────────────────
     Read once by renderer.js and re-read whenever the theme changes.
     The *-rgb values are bare channel triples so the renderer can vary alpha. */
  --plot-void: #060608;          /* beyond the plane */
  --plot-ground: #0c0c10;        /* the plane itself */
  --plot-line-rgb: 255, 255, 255;/* grid hairlines */
  --plot-mark-rgb: 255, 255, 255;/* selection marquee + parcel emphasis ring */
  --plot-scrim-rgb: 5, 5, 6;     /* spotlight dim */
  --plot-emphasis: 0.96;         /* luminance a hovered parcel moves toward */
  --plot-tone-lo: 0.20;          /* parcel greyscale range */
  --plot-tone-hi: 0.80;
  --plot-owned-rgb: 205, 160, 74;/* your own parcels — warm brown-gold */

  /* ── Type ───────────────────────────────────────────────── */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;

  --track-tight: -0.02em;
  --track-wide: 0.08em;
  --track-widest: 0.16em;

  /* ── Space ──────────────────────────────────────────────── */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 2px;
  --hairline: 1px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.16, 1.03, 0.3, 1);

  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 640ms;

  --shadow-lift: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 24px 60px -20px rgba(0, 0, 0, 0.95);

  --z-hud: 10;
  --z-card: 40;
  --z-dialog: 100;

  color-scheme: dark;
}

/* ── Light ──────────────────────────────────────────────────
   The ramp inverts, but the *roles* do not: --fg stays the readable
   foreground and --ink-900 stays the strongest ink, so every rule that
   references them keeps working without a light-specific override. */
:root[data-theme='light'] {
  --ink-000: #ffffff;
  --ink-050: #f7f7f5;
  --ink-100: #f1f1ee;
  --ink-150: #ebebe8;
  --ink-200: #e2e2de;
  --ink-300: #d4d4cf;
  --ink-400: #b4b4ae;
  --ink-500: #8e8e88;
  --ink-600: #6e6e68;
  --ink-700: #4e4e49;
  --ink-800: #2c2c29;
  --ink-900: #141412;
  --ink-999: #000000;

  --line: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.16);
  --line-bright: rgba(0, 0, 0, 0.34);

  --veil: rgba(247, 247, 245, 0.86);
  --veil-soft: rgba(247, 247, 245, 0.6);

  --plot-void: #eeeeea;
  --plot-ground: #f7f7f4;
  --plot-line-rgb: 0, 0, 0;
  --plot-mark-rgb: 10, 10, 10;
  --plot-scrim-rgb: 250, 250, 248;
  --plot-emphasis: 0.05;
  --plot-owned-rgb: 166, 120, 33;/* your own parcels — deeper gold for light ground */
  --plot-tone-lo: 0.30;
  --plot-tone-hi: 0.82;

  --shadow-lift: 0 18px 40px -14px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 24px 60px -22px rgba(0, 0, 0, 0.26);

  color-scheme: light;
}

/* Follow the OS when the user has not made an explicit choice. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --ink-000: #ffffff;
    --ink-050: #f7f7f5;
    --ink-100: #f1f1ee;
    --ink-150: #ebebe8;
    --ink-200: #e2e2de;
    --ink-300: #d4d4cf;
    --ink-400: #b4b4ae;
    --ink-500: #8e8e88;
    --ink-600: #6e6e68;
    --ink-700: #4e4e49;
    --ink-800: #2c2c29;
    --ink-900: #141412;
    --ink-999: #000000;

    --line: rgba(0, 0, 0, 0.09);
    --line-strong: rgba(0, 0, 0, 0.16);
    --line-bright: rgba(0, 0, 0, 0.34);

    --veil: rgba(247, 247, 245, 0.86);
    --veil-soft: rgba(247, 247, 245, 0.6);

    --plot-void: #eeeeea;
    --plot-ground: #f7f7f4;
    --plot-line-rgb: 0, 0, 0;
    --plot-mark-rgb: 10, 10, 10;
    --plot-scrim-rgb: 250, 250, 248;
    --plot-emphasis: 0.05;
    --plot-tone-lo: 0.30;
    --plot-tone-hi: 0.82;

    --shadow-lift: 0 18px 40px -14px rgba(0, 0, 0, 0.22);
    --shadow-card: 0 24px 60px -22px rgba(0, 0, 0, 0.26);

    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}