/* ============================================================
   SCOPELINE DESIGN TOKENS
   Dark is the primary theme; light is a first-class variant.
   Tweakable at runtime: --accent, --r-scale, --density,
   --font-sans / --font-mono, [data-theme], [data-density].
   ============================================================ */

:root {
  /* ---- Type families (overridden by Tweaks) ---- */
  --font-sans: "Archivo", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Type scale ---- */
  --fs-display: 44px;   /* page titles */
  --fs-h1: 30px;
  --fs-h2: 22px;        /* card titles */
  --fs-h3: 17px;        /* row titles, panel headings */
  --fs-body: 15px;
  --fs-sm: 13.5px;      /* secondary lines */
  --fs-micro: 11.5px;   /* eyebrows, table headers — caps + tracking */
  --track-micro: 0.08em;

  /* ---- Spacing (4px grid × density) ---- */
  --density: 1;
  --u: calc(4px * var(--density));
  --sp-1: var(--u);
  --sp-2: calc(var(--u) * 2);
  --sp-3: calc(var(--u) * 3);
  --sp-4: calc(var(--u) * 4);
  --sp-5: calc(var(--u) * 5);
  --sp-6: calc(var(--u) * 6);
  --sp-8: calc(var(--u) * 8);
  --sp-10: calc(var(--u) * 10);

  /* ---- Radius (× scale) ---- */
  --r-scale: 1;
  --r-xs: calc(6px * var(--r-scale));
  --r-sm: calc(9px * var(--r-scale));
  --r-md: calc(12px * var(--r-scale));
  --r-lg: calc(16px * var(--r-scale));
  --r-xl: calc(22px * var(--r-scale));
  --r-pill: 999px;

  /* ---- Accent (overridden by Tweaks) ---- */
  --accent: #E8501F;
  --accent-hover: color-mix(in oklab, var(--accent) 84%, white);
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-softer: color-mix(in oklab, var(--accent) 9%, transparent);
  --on-accent: #FFFFFF;

  /* ---- System identity (constant across themes) ---- */
  --sys-procore: #F47E42;
  --sys-sharepoint: #038387;
  --sys-remarcable: #02717b;
  --sys-accubid: #035886;
  --sys-scopeline: var(--accent);

  /* ---- Status (constant across themes) ---- */
  --danger: #E5484D;
  --warning: #F0A132;
  --success: #2EBD6B;
  --info: #4D9FEC;
  --locked: #6B7480;

  --danger-soft: color-mix(in oklab, var(--danger) 14%, transparent);
  --warning-soft: color-mix(in oklab, var(--warning) 14%, transparent);
  --success-soft: color-mix(in oklab, var(--success) 14%, transparent);
  --info-soft: color-mix(in oklab, var(--info) 14%, transparent);

  /* ---- Paper spotlight surface (near-constant) ---- */
  --paper-bg: #FAFBFC;
  --paper-raised: #FFFFFF;
  --paper-text: #15191E;
  --paper-text-2: #5A646F;
  --paper-stroke: rgba(15, 22, 32, 0.10);

  /* ---- Glass & edge-light ---- */
  --glass-blur: 16px;

  /* ---- Controls ---- */
  --control-h: calc(40px * var(--density));
  --control-h-sm: calc(32px * var(--density));
  --control-h-lg: calc(48px * var(--density));
}

/* ============================================================
   DARK (default)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #07090D;
  --bg-raised: rgba(208, 224, 248, 0.055);   /* glass cards */
  --bg-overlay: rgba(214, 228, 250, 0.085);  /* nested panels, inspector */
  --bg-inset: rgba(2, 5, 9, 0.45);           /* wells, inputs, queue rows */
  --bg-hover: rgba(255, 255, 255, 0.05);

  --stroke: rgba(255, 255, 255, 0.085);
  --stroke-strong: rgba(255, 255, 255, 0.16);

  --text-1: #F2F4F6;
  --text-2: #A9B1BA;
  /* text-3 is the muted token (helper/caption/header/placeholder/mono keys).
     #69727E read ~3.75:1 on cards — below AA. #7B8492 lifts it to ~4.84:1 on
     cards / ~5.1:1 on input wells while staying clearly below text-2. */
  --text-3: #7B8492;

  --edge-hl: rgba(255, 255, 255, 0.09);
  --edge-hl-strong: rgba(255, 255, 255, 0.18);
  --solid-raised: #14171D;

  --shadow-card: inset 0 1px 0 var(--edge-hl), 0 16px 40px rgba(0,0,0,0.42);
  --shadow-pop: inset 0 1px 0 var(--edge-hl-strong), 0 24px 64px rgba(0,0,0,0.55);
  --paper-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 26px 64px rgba(0,0,0,0.55), 0 0 110px -34px rgba(165,195,255,0.20), inset 0 0 46px -28px rgba(165,195,255,0.18);
}

/* ============================================================
   LIGHT variant
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #E9ECF1;
  --bg-raised: rgba(255, 255, 255, 0.74);
  --bg-overlay: rgba(255, 255, 255, 0.55);
  --bg-inset: rgba(15, 22, 32, 0.055);
  --bg-hover: rgba(15, 22, 32, 0.04);

  --stroke: rgba(15, 22, 32, 0.10);
  --stroke-strong: rgba(15, 22, 32, 0.20);

  --text-1: #15191E;
  --text-2: #4E5863;
  /* #8A93A0 read ~2.97:1 — below AA. #616A75 clears AA against the darker
     --bg-base #E9ECF1 (~4.64:1), the worst-case light surface, not just cards. */
  --text-3: #616A75;

  --edge-hl: rgba(255, 255, 255, 0.85);
  --edge-hl-strong: rgba(255, 255, 255, 1);
  --solid-raised: #FFFFFF;

  --shadow-card: inset 0 1px 0 var(--edge-hl), 0 1px 2px rgba(15,22,32,0.05), 0 14px 36px rgba(15,22,32,0.09);
  --shadow-pop: inset 0 1px 0 var(--edge-hl-strong), 0 22px 60px rgba(15,22,32,0.20);
  --paper-shadow: 0 26px 60px rgba(15,22,32,0.30), 0 0 90px -30px rgba(20,40,80,0.25), inset 0 0 46px -28px rgba(120,150,220,0.18);

  /* Paper spotlight inverts: dark slab on light UI keeps the contrast jump */
  --paper-bg: #15191E;
  --paper-raised: #1D232B;
  --paper-text: #F2F4F6;
  --paper-text-2: #A9B1BA;
  --paper-stroke: rgba(255, 255, 255, 0.10);
}

/* ---- Density presets ---- */
:root[data-density="compact"] { --density: 0.8; }
:root[data-density="comfortable"] { --density: 1; }