/* ============================================================================
   wivo.my — token sheet
   Extends the "Industry" design system: steel-blue wireframe on a technical
   ground, Barlow Condensed over Barlow, square corners, hairline borders,
   registration marks. Adds a selected dark theme and a validated data
   visualisation palette.

   Every colour, space, radius and shadow in the app comes from here.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Condensed:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Light ground (the system's default) ─────────────────────────────────── */
:root {
  color-scheme: light;

  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-surface-2: #fbfbfc;
  --color-paper: #ffffff;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-divider-soft: color-mix(in srgb, #1d1f20 9%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  /* Ink roles — what type is allowed to be */
  --ink-1: var(--color-text);
  --ink-2: color-mix(in srgb, var(--color-text) 72%, transparent);
  --ink-3: color-mix(in srgb, var(--color-text) 52%, transparent);
  --ink-4: color-mix(in srgb, var(--color-text) 36%, transparent);
  --ink-inverse: var(--color-bg);

  /* Interactive washes */
  --wash-1: color-mix(in srgb, var(--color-text) 5%, transparent);
  --wash-2: color-mix(in srgb, var(--color-text) 9%, transparent);
  --wash-3: color-mix(in srgb, var(--color-text) 14%, transparent);
  --wash-accent: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --wash-accent-strong: color-mix(in srgb, var(--color-accent) 22%, transparent);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-semi: "Barlow Semi Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading-weight: 600;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;
  --space-10: 34px;
  --space-12: 40.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
  --shadow-paper: 0 1px 2px color-mix(in srgb, #2b2b2d 10%, transparent),
                  0 8px 28px color-mix(in srgb, #2b2b2d 12%, transparent);

  /* Chrome metrics — one place to retune the whole shell */
  --rail-w: 70px;
  --titlebar-h: 44px;
  --ribbon-h: 84px;
  --statusbar-h: 28px;
  --panel-w: 320px;

  /* ── Data visualisation ───────────────────────────────────────────────
     Categorical slots, fixed order, never cycled. Validated with
     scripts/validate_palette.js against surface #f2f2f3:
       lightness band PASS · chroma floor PASS · adjacent CVD ΔE 10.3 PASS
       normal-vision ΔE 17.8 PASS · contrast ≥3:1 PASS
     ADJACENT-safe only. All-pairs forms (scatter, bubble) cap at 2 series;
     past that, facet or fold to "Other". */
  --series-1: #2f79bd;  /* steel blue  */
  --series-2: #c2612e;  /* rust        */
  --series-3: #00897b;  /* teal        */
  --series-4: #a8820f;  /* ochre       */
  --series-5: #b4638f;  /* magenta     */
  --series-6: #4f7a2f;  /* moss        */
  --series-7: #5a4e9c;  /* violet      */
  --series-8: #bf4640;  /* brick       */

  /* Sequential — one hue, light→dark. Ordinal use starts at seq-300. */
  --seq-100: #dfeaf4;
  --seq-150: #cddef0;
  --seq-200: #b9d0e8;
  --seq-250: #a2bfdc;
  --seq-300: #89abcd;
  --seq-350: #7098bd;
  --seq-400: #5883ab;
  --seq-450: #446f96;
  --seq-500: #345c80;
  --seq-550: #274a69;
  --seq-600: #1c3a54;
  --seq-650: #142c41;

  /* Diverging — warm/cool poles, neutral midpoint */
  --div-cool: #2f79bd;
  --div-mid: #e2e1de;
  --div-warm: #bf4640;

  /* Status — fixed, never themed, never reused as a series */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --status-good-ink: #0a6b12;
  --status-warning-ink: #7a5406;
  --status-serious-ink: #8c4520;
  --status-critical-ink: #97251f;

  /* Chart chrome */
  --viz-surface: var(--color-bg);
  --viz-grid: color-mix(in srgb, var(--color-text) 10%, transparent);
  --viz-axis: color-mix(in srgb, var(--color-text) 22%, transparent);
  --viz-ink: var(--ink-1);
  --viz-ink-2: var(--ink-3);

  /* Improve lenses — each maps to a series or status slot, plus a wash */
  --lens-passive: var(--series-7);
  --lens-adverb: var(--series-4);
  --lens-hedge: var(--series-5);
  --lens-wordy: var(--series-2);
  --lens-cliche: var(--series-8);
  --lens-complex: var(--series-3);
  --lens-repeat: var(--series-6);
  --lens-long: var(--series-1);
  /* The document-level checks (inconsistency, acronyms, house style) share the
     steel accent and are told apart by their underline: the eight categorical
     slots are spoken for, and a ninth generated hue is how a palette stops
     being readable. */
  --lens-doc: var(--color-accent-700);
}

/* ── Dark ground (selected, not flipped) ─────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #14171a;
  --color-surface: #1c2024;
  --color-surface-2: #22272c;
  --color-paper: #1a1e22;
  --color-text: #e6e8ea;
  --color-accent: #7ba4cc;
  --color-divider: color-mix(in srgb, #e6e8ea 17%, transparent);
  --color-divider-soft: color-mix(in srgb, #e6e8ea 9%, transparent);

  --color-neutral-100: #2b2f34;
  --color-neutral-200: #343a40;
  --color-neutral-300: #454c53;
  --color-neutral-400: #5d656d;
  --color-neutral-500: #7b838b;
  --color-neutral-600: #99a1a8;
  --color-neutral-700: #b6bdc3;
  --color-neutral-800: #d0d6db;
  --color-neutral-900: #e6e8ea;

  --color-accent-100: #1b2833;
  --color-accent-200: #22323f;
  --color-accent-300: #2e4457;
  --color-accent-400: #3e5a72;
  --color-accent-500: #55768f;
  --color-accent-600: #7ba4cc;
  --color-accent-700: #9cbcdc;
  --color-accent-800: #c2d7ec;
  --color-accent-900: #e1ecf7;

  --ink-1: var(--color-text);
  --ink-2: color-mix(in srgb, var(--color-text) 74%, transparent);
  --ink-3: color-mix(in srgb, var(--color-text) 54%, transparent);
  --ink-4: color-mix(in srgb, var(--color-text) 38%, transparent);
  --ink-inverse: #14171a;

  --wash-1: color-mix(in srgb, #e6e8ea 5%, transparent);
  --wash-2: color-mix(in srgb, #e6e8ea 9%, transparent);
  --wash-3: color-mix(in srgb, #e6e8ea 15%, transparent);
  --wash-accent: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --wash-accent-strong: color-mix(in srgb, var(--color-accent) 28%, transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, .62);
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 32px rgba(0, 0, 0, .5);

  /* Dark categorical steps — the same eight hues re-stepped for the dark
     surface (#14171a) and validated as a set, not an automatic flip.
       lightness band PASS · chroma floor PASS · adjacent CVD ΔE 10.7 PASS
       normal-vision ΔE 17.6 PASS · contrast ≥3:1 PASS */
  --series-1: #5695d3;
  --series-2: #d5703a;
  --series-3: #23a892;
  --series-4: #b78c1c;
  --series-5: #c5749f;
  --series-6: #6d9e45;
  --series-7: #8b7fd4;
  --series-8: #e06a63;

  /* Sequential reads dark→light on a dark ground; ordinal stops at seq-500 */
  --seq-100: #142c41;
  --seq-150: #1c3a54;
  --seq-200: #274a69;
  --seq-250: #345c80;
  --seq-300: #446f96;
  --seq-350: #5883ab;
  --seq-400: #7098bd;
  --seq-450: #89abcd;
  --seq-500: #a2bfdc;
  --seq-550: #b9d0e8;
  --seq-600: #cddef0;
  --seq-650: #dfeaf4;

  --div-cool: #5695d3;
  --div-warm: #e06a63;
  --div-mid: #3a3f45;

  --status-good-ink: #5fd35f;
  --status-warning-ink: #f5c95c;
  --status-serious-ink: #f0a381;
  --status-critical-ink: #ec7b7b;

  --viz-grid: color-mix(in srgb, #e6e8ea 11%, transparent);
  --viz-axis: color-mix(in srgb, #e6e8ea 24%, transparent);
}

/* The OS preference applies only while the user has not chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;

    --color-bg: #14171a;
    --color-surface: #1c2024;
    --color-surface-2: #22272c;
    --color-paper: #1a1e22;
    --color-text: #e6e8ea;
    --color-accent: #7ba4cc;
    --color-divider: color-mix(in srgb, #e6e8ea 17%, transparent);
    --color-divider-soft: color-mix(in srgb, #e6e8ea 9%, transparent);

    --color-neutral-100: #2b2f34;
    --color-neutral-200: #343a40;
    --color-neutral-300: #454c53;
    --color-neutral-400: #5d656d;
    --color-neutral-500: #7b838b;
    --color-neutral-600: #99a1a8;
    --color-neutral-700: #b6bdc3;
    --color-neutral-800: #d0d6db;
    --color-neutral-900: #e6e8ea;

    --color-accent-100: #1b2833;
    --color-accent-200: #22323f;
    --color-accent-300: #2e4457;
    --color-accent-400: #3e5a72;
    --color-accent-500: #55768f;
    --color-accent-600: #7ba4cc;
    --color-accent-700: #9cbcdc;
    --color-accent-800: #c2d7ec;
    --color-accent-900: #e1ecf7;

    --ink-1: var(--color-text);
    --ink-2: color-mix(in srgb, var(--color-text) 74%, transparent);
    --ink-3: color-mix(in srgb, var(--color-text) 54%, transparent);
    --ink-4: color-mix(in srgb, var(--color-text) 38%, transparent);
    --ink-inverse: #14171a;

    --wash-1: color-mix(in srgb, #e6e8ea 5%, transparent);
    --wash-2: color-mix(in srgb, #e6e8ea 9%, transparent);
    --wash-3: color-mix(in srgb, #e6e8ea 15%, transparent);
    --wash-accent: color-mix(in srgb, var(--color-accent) 16%, transparent);
    --wash-accent-strong: color-mix(in srgb, var(--color-accent) 28%, transparent);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .62);
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 32px rgba(0, 0, 0, .5);

    --series-1: #5695d3;
    --series-2: #d5703a;
    --series-3: #23a892;
    --series-4: #b78c1c;
    --series-5: #c5749f;
    --series-6: #6d9e45;
    --series-7: #8b7fd4;
    --series-8: #e06a63;

    --seq-100: #142c41;
    --seq-150: #1c3a54;
    --seq-200: #274a69;
    --seq-250: #345c80;
    --seq-300: #446f96;
    --seq-350: #5883ab;
    --seq-400: #7098bd;
    --seq-450: #89abcd;
    --seq-500: #a2bfdc;
    --seq-550: #b9d0e8;
    --seq-600: #cddef0;
    --seq-650: #dfeaf4;

    --div-cool: #5695d3;
    --div-warm: #e06a63;
    --div-mid: #3a3f45;

    --status-good-ink: #5fd35f;
    --status-warning-ink: #f5c95c;
    --status-serious-ink: #f0a381;
    --status-critical-ink: #ec7b7b;

    --viz-grid: color-mix(in srgb, #e6e8ea 11%, transparent);
    --viz-axis: color-mix(in srgb, #e6e8ea 24%, transparent);
  }
}

/* Density — the whole shell breathes from one multiplier */
:root[data-density="compact"] {
  --space-2: 5px;
  --space-3: 8px;
  --space-4: 11px;
  --space-6: 16px;
  --space-8: 22px;
  --ribbon-h: 72px;
  --titlebar-h: 40px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}