/* ==========================================================================
   Parsewave Console design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, radius, elevation and
   motion. Served as /static/tokens.css and loaded FIRST on every page, before
   any page-local <style> block, so pages can override during migration.

   Replaces: 17 competing private :root blocks, 644 distinct colour literals,
   135 distinct font-size values, 234 distinct padding values, 18 font weights.

   Dark is the base theme (27 of 36 pages are dark, and the shared nav is).
   Light is a single override block keyed on html[data-theme="light"], matching
   the existing sidebar.css convention and the persisted 'pw-theme' key.

   Every foreground/background pairing in here is contrast-verified — see
   scripts/check-contrast.js. Do not hand-edit a colour without re-running it.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Neutrals: page and surfaces -------------------------------------- */
  /* The official Parsewave palette is warm near-black and off-white. These
     surfaces carry a slight green undertone so brand colour feels native to
     the interface instead of pasted onto a grey dashboard. */
  --bg: #0b0d0a;                /* page */
  --bg-inset: #070807;          /* wells, code blocks, table zebra */
  --surface-1: #121410;         /* cards, panels */
  --surface-2: #191c16;         /* inputs, raised rows, tab strips */
  --surface-3: #22261d;         /* hover */
  --surface-4: #2c3125;         /* active / pressed */

  --border: #2a2f25;            /* hairlines between surfaces */
  --border-strong: #687063;     /* input + control boundaries */

  /* ---- Neutrals: text --------------------------------------------------- */
  --text: #f1f0ec;              /* official off-white */
  --text-2: #c0beb8;            /* secondary copy, table cells */
  --text-3: #97978e;            /* muted labels, captions, help text */
  --text-faint: #6e7269;        /* decorative only */
  --text-inverse: #0b1007;
  --backdrop: rgba(0, 0, 0, 0.72);

  /* ---- Parsewave brand -------------------------------------------------- */
  --brand-lime: #70d100;
  --brand-deep: #3f7700;
  --brand-ink: #0d2635;
  --brand-off-white: #f1f0ec;

  /* ---- Accent ----------------------------------------------------------- */
  --accent: #70d100;            /* primary action, focus, active indicator */
  --accent-hover: #7de200;
  --accent-active: #61b900;
  --accent-text: #9bea4c;       /* accent as text on dark surfaces */
  --accent-soft: rgba(112, 209, 0, 0.12);
  --accent-soft-hover: rgba(112, 209, 0, 0.2);
  --accent-border: rgba(112, 209, 0, 0.38);
  --on-accent: #0c1306;

  /* ---- Data accents ----------------------------------------------------- */
  /* These are for categories and charts, never unlabeled status alone. */
  --data-cyan: #53d6cb;
  --data-violet: #a693ff;
  --data-coral: #ff8a72;
  --data-gold: #f2c14e;
  --data-sky: #72b7ff;
  --data-cyan-soft: rgba(83, 214, 203, 0.12);
  --data-violet-soft: rgba(166, 147, 255, 0.12);
  --data-coral-soft: rgba(255, 138, 114, 0.12);
  --data-gold-soft: rgba(242, 193, 78, 0.12);
  --data-sky-soft: rgba(114, 183, 255, 0.12);

  /* ---- Semantic --------------------------------------------------------- */
  --success: #1f9d63;
  --success-text: #5fd8a0;
  --success-bg: rgba(31, 157, 99, 0.15);
  --success-border: rgba(31, 157, 99, 0.4);
  --on-success: #ffffff;

  --warning: #b7791f;
  --warning-text: #f2c14e;
  --warning-bg: rgba(183, 121, 31, 0.16);
  --warning-border: rgba(183, 121, 31, 0.44);
  --on-warning: #1a1204;

  --danger: #c53434;
  --danger-hover: #d94040;
  --danger-text: #ff8a8a;
  --danger-bg: rgba(197, 52, 52, 0.16);
  --danger-border: rgba(197, 52, 52, 0.45);
  --on-danger: #ffffff;

  --info: #2b6cb0;
  --info-text: #82b8f5;
  --info-bg: rgba(43, 108, 176, 0.16);
  --info-border: rgba(43, 108, 176, 0.44);
  --on-info: #ffffff;

  /* Neutral/idle chip — for "unknown", "n/a", "paused" states */
  --neutral-text: #a8a8a8;
  --neutral-bg: rgba(160, 160, 160, 0.13);
  --neutral-border: rgba(160, 160, 160, 0.3);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: #9bea4c;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
    SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* 7-step scale on ~1.125, replacing 135 ad hoc values.
     Root stays at the browser default 16px — no page's rem maths shifts. */
  --fs-display: 2.25rem;    /* 36px, page hero only */
  --fs-h1: 2rem;            /* 32px, page title, carries the page */
  --fs-h2: 1.25rem;         /* 20px, section heading */
  --fs-h3: 1rem;            /* 16px, panel heading */
  --fs-body: 0.875rem;      /* 14px — default copy */
  --fs-small: 0.8125rem;    /* 13px — table cells, dense UI */
  --fs-caption: 0.75rem;    /* 12px — labels, metadata */
  --fs-micro: 0.6875rem;    /* 11px — badges, kickers */

  --lh-tight: 1.12;         /* display */
  --lh-heading: 1.25;       /* h1-h3 */
  --lh-body: 1.55;          /* paragraphs — a touch more air at 14px */
  --lh-ui: 1.35;            /* single-line UI text */

  /* Four weights only, replacing 18 (incl. 850/820/780/760/750/650). */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Optical tracking curve. Type needs progressively tighter letter-spacing as
     it gets larger, and looser as it gets smaller — a single tracking value
     across a scale is the most common giveaway of unconsidered typography. */
  --tracking-display: -0.022em;
  --tracking-h1: -0.017em;
  --tracking-h2: -0.011em;
  --tracking-h3: -0.006em;
  --tracking-body: 0em;
  --tracking-small: 0.003em;
  --tracking-caption: 0.045em;  /* uppercase labels */
  --tracking-micro: 0.055em;
  /* Retained: older rules reference this name. */
  --tracking-tight: -0.017em;

  /* ---- Spacing: 4px grid, replacing 234 distinct padding values --------- */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-9: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */

  /* ---- Radius: replacing 39 distinct values ---------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Elevation: replacing 72 distinct shadows ------------------------ */
  /* Two-layer shadows: a tight contact shadow plus a soft ambient one. A single
     large blur reads as a fake drop shadow; the pair reads as real depth. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 20px -8px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 18px 40px -14px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.34), 0 32px 72px -18px rgba(0, 0, 0, 0.58);
  /* Form-field focus ring. Uses --accent-border (44%/34% alpha), not the 16% --accent-soft
     halo, so a focused input is as legible as every other focusable control. */
  --shadow-focus: 0 0 0 3px var(--accent-border);

  /* ---- Gradients -------------------------------------------------------
     Restrained on purpose. Every gradient here is single-hue or
     adjacent-hue, low-contrast, and used to describe a light source or a
     surface — never as decoration. No multi-hue "AI" gradients.

     The rule: a gradient should be almost invisible until you remove it. */

  /* Surface sheen: top edge catches light. ~2% delta, enough to give a card an
     apparent top edge without reading as a gradient. */
  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.012) 38%,
    rgba(255, 255, 255, 0) 100%);

  /* Raised controls (inputs, tab strips) — same idea, weaker. */
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.028) 0%,
    rgba(255, 255, 255, 0) 70%);

  /* Primary action: one hue, two stops, deeper at the bottom so the button
     reads as lit from above. 6% lightness delta. */
  --gradient-accent: linear-gradient(180deg, #7be000 0%, #63bd00 100%);
  --gradient-accent-hover: linear-gradient(180deg, #88ea10 0%, #70cb00 100%);
  --gradient-danger: linear-gradient(180deg, #cc3838 0%, #ad2828 100%);

  /* No page-background gradient. A coloured wash behind the header tinted every
     neutral on the page and is exactly the sort of decoration this app does not
     want. Deliberately removed rather than toned down. */

  /* Hairline that fades out — for section rules that shouldn't box things in. */
  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  /* Skeleton shimmer. */
  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  /* Sidebar: barely-there vertical fall-off so the nav reads as a plane. */
  --gradient-sidebar: linear-gradient(180deg,
    rgba(112, 209, 0, 0.035) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(0, 0, 0, 0.2) 100%);

  /* ---- Layering: replacing 26 ad hoc z-index values ------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-banner: 300;
  --z-sidebar: 500;
  --z-overlay: 700;
  --z-modal: 800;
  --z-toast: 900;
  --z-tooltip: 1000;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 260ms;

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-width: 248px;
  --content-max: 1680px;      /* dense dashboards */
  --content-max-prose: 760px; /* forms and single-column pages */
  --header-height: 56px;
}

/* ==========================================================================
   Light theme — one override block. Only the values that must change.
   ========================================================================== */
html[data-theme='light'] {
  color-scheme: light;

  --bg: #f1f0ec;
  --bg-inset: #e9ebe4;
  --surface-1: #ffffff;
  --surface-2: #f5f7f1;
  --surface-3: #e9eee3;
  --surface-4: #dce5d4;

  --border: #dde3d7;
  --border-strong: #818d78;

  --text: #11150f;
  --text-2: #424a3d;
  --text-3: #5d6856;
  --text-faint: #788172;
  --text-inverse: #ffffff;
  --backdrop: rgba(17, 21, 15, 0.48);

  --accent: #3f7700;
  --accent-hover: #345f00;
  --accent-active: #2b5000;
  --accent-text: #356900;
  --accent-soft: rgba(63, 119, 0, 0.09);
  --accent-soft-hover: rgba(63, 119, 0, 0.15);
  --accent-border: rgba(63, 119, 0, 0.34);
  --on-accent: #ffffff;

  --data-cyan: #087f78;
  --data-violet: #6753c6;
  --data-coral: #b84e3a;
  --data-gold: #8a5c00;
  --data-sky: #2169a8;
  --data-cyan-soft: rgba(8, 127, 120, 0.09);
  --data-violet-soft: rgba(103, 83, 198, 0.09);
  --data-coral-soft: rgba(184, 78, 58, 0.09);
  --data-gold-soft: rgba(138, 92, 0, 0.09);
  --data-sky-soft: rgba(33, 105, 168, 0.09);

  --success: #14794c;
  --success-text: #0f6b43;
  --success-bg: rgba(20, 121, 76, 0.1);
  --success-border: rgba(20, 121, 76, 0.3);

  --warning: #96600f;
  --warning-text: #7d4f08;
  --warning-bg: rgba(150, 96, 15, 0.11);
  --warning-border: rgba(150, 96, 15, 0.32);
  --on-warning: #ffffff;

  --danger: #bb2d2d;
  --danger-hover: #a82525;
  --danger-text: #a52121;
  --danger-bg: rgba(187, 45, 45, 0.09);
  --danger-border: rgba(187, 45, 45, 0.3);

  --info: #1f5f9e;
  --info-text: #1a5589;
  --info-bg: rgba(31, 95, 158, 0.1);
  --info-border: rgba(31, 95, 158, 0.3);

  --neutral-text: #4d5766;
  --neutral-bg: rgba(93, 103, 117, 0.1);
  --neutral-border: rgba(93, 103, 117, 0.26);

  --focus-ring: #356900;

  --shadow-sm: 0 1px 1px rgba(16, 21, 28, 0.04), 0 1px 3px rgba(16, 21, 28, 0.06);
  --shadow: 0 1px 2px rgba(16, 21, 28, 0.05), 0 4px 10px -2px rgba(16, 21, 28, 0.08);
  --shadow-md: 0 2px 4px rgba(16, 21, 28, 0.05), 0 12px 28px -6px rgba(16, 21, 28, 0.1);
  --shadow-lg: 0 4px 8px rgba(16, 21, 28, 0.06), 0 24px 56px -12px rgba(16, 21, 28, 0.13);

  /* ---- Gradients, light ------------------------------------------------
     A white sheen over white is invisible, so light mode inverts the idea:
     the surface stays white at the top and picks up a hint of the page tint
     towards the bottom. Same implied light source, opposite direction. */
  --gradient-surface: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(16, 21, 28, 0.012) 100%);
  --gradient-raised: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(16, 21, 28, 0.014) 100%);

  --gradient-accent: linear-gradient(180deg, #4b8507 0%, #376c00 100%);
  --gradient-accent-hover: linear-gradient(180deg, #55920d 0%, #3f7700 100%);
  --gradient-danger: linear-gradient(180deg, #c73434 0%, #ab2424 100%);


  --gradient-rule: linear-gradient(90deg,
    var(--border-strong) 0%, var(--border) 45%, transparent 100%);

  --gradient-shimmer: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);

  --gradient-sidebar: linear-gradient(180deg,
    rgba(112, 209, 0, 0.045) 0%,
    rgba(17, 21, 15, 0.024) 100%);
}