/* ══════════════════════════════════════════════════════════════════════
   Mineral Design System — tokens (docs/design-system.html, v1.0.0)
   MUST stay the FIRST stylesheet in frontend/index.html: every other file
   consumes these custom properties. One data-theme attribute owns theming.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) — exact Mineral values ───────────────────── */
:root,[data-theme="dark"]{
  --bg-solid:#0C0F14;--surf:rgba(255,255,255,0.05);--surf2:rgba(255,255,255,0.03);
  --surf-hover:rgba(255,255,255,0.09);--bord:rgba(255,255,255,0.09);--bord2:rgba(255,255,255,0.06);
  --bord-bright:rgba(212,132,90,0.38);--az:#D4845A;--vib:#D4845A;--vd:#6ECFB0;--am:#E8B84A;
  --rj:#E86363;--tx:#F2EDE8;--tx2:#C8BFB4;--mt:#8A7F74;--mt2:#857A70;--fem:#C9A8F0;
  --copper:#D4845A;--copper-dim:rgba(212,132,90,.15);--accent-glow:rgba(212,132,90,.12);
  --font:"DM Sans",sans-serif;--mono:"DM Mono",monospace;
  --sh:0 4px 24px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.04) inset;
  --shl:0 16px 56px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06) inset;
  --glass-blur:blur(24px) saturate(180%);--glass-border:1px solid rgba(212,132,90,.15);
  --glass-shine:linear-gradient(135deg,rgba(212,132,90,.08) 0%,rgba(255,255,255,.03) 40%,transparent 100%);
  --coll-logo-filter:brightness(0) invert(1) opacity(.9);
  --brand:var(--copper);
  --focus-ring:0 0 0 3px rgba(212,132,90,.35);
  /* Legacy alias values that carry theme-specific literals (plan §3.2 bridge) */
  --ok-dim:rgba(110,207,176,.1);--ok-bord:rgba(110,207,176,.28);
  --warn-dim:rgba(232,184,74,.1);--warn-bord:rgba(232,184,74,.28);
  --bad-dim:rgba(232,99,99,.1);--bad-bord:rgba(232,99,99,.28);
  --info-dim:rgba(91,143,249,.1);
  /* Refined Mineral demo deltas (docs/design-demo.html). --on-accent is now
     themed: dark ink on copper in dark (6.3:1), white in light. Audited —
     every usage sits on copper or a mid/light tone where ink passes 4.5:1. */
  --on-accent:#1C110A;--copper-hover:#E29469;
  --ok-strong:#6ECFB0;--warn-strong:#E8B84A;--bad-strong:#E86363;
  --link-strong:#D4845A;--info-strong:#5B8FF9;
  --avatar-neutral:color-mix(in srgb, var(--mt) 18%, transparent);
  --glass-bg:color-mix(in srgb, var(--bg-solid) 82%, transparent);
  --track:color-mix(in srgb, var(--mt) 32%, transparent);
}

/* ── Light theme — same tokens, re-valued ──────────────────────────── */
[data-theme="light"]{
  --bg-solid:#FAF8F5;--surf:rgba(255,255,255,0.9);--surf2:rgba(255,255,255,0.7);
  --surf-hover:rgba(255,255,255,0.97);--bord:rgba(90,70,50,0.20);--bord2:rgba(90,70,50,0.12);
  --bord-bright:rgba(180,100,60,0.25);--az:#B06030;--vib:#B06030;--vd:#1B9E7A;--am:#A07020;
  --rj:#C03030;--tx:#1C1814;--tx2:#3A3430;--mt:#6A5E54;--mt2:#9A8E84;--fem:#7B4FB0;
  --copper:#B06030;--copper-dim:rgba(176,96,48,.10);--accent-glow:rgba(176,96,48,.08);
  --font:"DM Sans",sans-serif;--mono:"DM Mono",monospace;
  --sh:0 2px 12px rgba(0,0,0,.06),0 1px 0 rgba(255,255,255,.95) inset;
  --shl:0 8px 32px rgba(0,0,0,.10),0 1px 0 rgba(255,255,255,.95) inset;
  --glass-blur:blur(20px) saturate(150%);--glass-border:1px solid rgba(90,70,50,.10);
  --glass-shine:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  --coll-logo-filter:none;
  --brand:var(--copper);
  --focus-ring:0 0 0 3px rgba(176,96,48,.2);
  --ok-dim:rgba(27,158,122,.1);--ok-bord:rgba(27,158,122,.28);
  --warn-dim:rgba(160,112,32,.1);--warn-bord:rgba(160,112,32,.28);
  --bad-dim:rgba(192,48,48,.1);--bad-bord:rgba(192,48,48,.28);
  --info-dim:rgba(91,143,249,.1);
  /* Refined Mineral demo deltas (docs/design-demo.html) */
  --on-accent:#FFFFFF;--copper-hover:#9C5226;
  --ok-strong:#157F66;--warn-strong:#8A5F17;--bad-strong:#C03030;
  --link-strong:#9A4F22;--info-strong:#2E5FB8;
  --avatar-neutral:color-mix(in srgb, var(--mt) 16%, transparent);
  --glass-bg:color-mix(in srgb, var(--bg-solid) 88%, transparent);
  --track:color-mix(in srgb, var(--mt) 28%, transparent);
}

/* ── Primitive tokens (proposals #1, #3, #5, #6) ───────────────────── */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;
  --r-1:6px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:24px;
  --z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal:300;--z-toast:400;
  --dur-1:.1s;--dur-2:.15s;--dur-3:.3s;--dur-4:.5s;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  /* Text on copper/gradient surfaces: --on-accent is THEMED now — declared in
     the dark block (ink), the light block (white), and the print override. */
  /* Fixed type scale (product UI — no fluid clamp) + control radii */
  --fs-12:.75rem;--fs-13:.8125rem;--fs-15:.9375rem;--fs-17:1.0625rem;
  --fs-21:1.3125rem;--fs-28:1.75rem;--fs-num:2.5rem;--fs-kpi:2.75rem;
  --r-ctl:10px;--r-pill:999px;

  /* Semantic groups (proposal #5) */
  --cat-1:#D4845A;--cat-2:#6ECFB0;--cat-3:#E8B84A;--cat-4:#C00000;--cat-5:#8C64C8;--cat-6:#5B8FF9;
  --est-E:#1B3A6B;--est-S:#E8943A;--est-O:#C9A227;
  --di-A:#2AA592;--di-M:#C07A28;--di-B:#C03030;
  --lv-N1:#37474F;--lv-N2:#2E7D32;--lv-N3:#1F5C99;--lv-N4:#C00000;

  /* Legacy-name bridge (plan §3.1.5/§3.2) — var() refs resolve per theme.
     --bg2 was referenced but never defined in the old app (DS proposal #2). */
  --bg:var(--bg-solid);
  --bg2:var(--surf2);
  --surf-hi:var(--surf-hover);
  --copper-glow:var(--accent-glow);
  --copper-border:var(--bord-bright);
  --ok:var(--vd);
  --warn:var(--am);
  --bad:var(--rj);
  --info:var(--cat-6);
  --r-card:14px;   /* cards 12–16px per craft floor; --r-4 (16px) stays for non-card radii */
  --r-sm:10px;   /* inputs 7–10px per DS Agent Contract */
  --r-xs:7px;
}

/* ── Accessible focus ring (proposal #3) ───────────────────────────── */
:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* ── Reduced motion (proposal #10, CSS-only) ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── Print = forced Mineral Light (D8) ───────────────────────────────
   Re-points every theme-dependent token to Light values so a dark session
   always prints dark-on-light. var()-ref aliases (--bg, --ok, …) follow. */
@media print{
  :root,[data-theme="dark"],[data-theme="light"]{
    --bg-solid:#FAF8F5;--surf:rgba(255,255,255,0.9);--surf2:rgba(255,255,255,0.7);
    --surf-hover:rgba(255,255,255,0.97);--bord:rgba(90,70,50,0.20);--bord2:rgba(90,70,50,0.12);
    --bord-bright:rgba(180,100,60,0.25);--az:#B06030;--vib:#B06030;--vd:#1B9E7A;--am:#A07020;
    --rj:#C03030;--tx:#1C1814;--tx2:#3A3430;--mt:#6A5E54;--mt2:#9A8E84;--fem:#7B4FB0;
    --copper:#B06030;--copper-dim:rgba(176,96,48,.10);--accent-glow:rgba(176,96,48,.08);
    --sh:0 2px 12px rgba(0,0,0,.06),0 1px 0 rgba(255,255,255,.95) inset;
    --shl:0 8px 32px rgba(0,0,0,.10),0 1px 0 rgba(255,255,255,.95) inset;
    --glass-border:1px solid rgba(90,70,50,.10);
    --coll-logo-filter:none;
    --brand:var(--copper);
    --focus-ring:0 0 0 3px rgba(176,96,48,.2);
    --ok-dim:rgba(27,158,122,.1);--ok-bord:rgba(27,158,122,.28);
    --warn-dim:rgba(160,112,32,.1);--warn-bord:rgba(160,112,32,.28);
    --bad-dim:rgba(192,48,48,.1);--bad-bord:rgba(192,48,48,.28);
    --info-dim:rgba(91,143,249,.1);
    --on-accent:#FFFFFF;--copper-hover:#9C5226;
    --ok-strong:#157F66;--warn-strong:#8A5F17;--bad-strong:#C03030;
    --link-strong:#9A4F22;--info-strong:#2E5FB8;
    --avatar-neutral:color-mix(in srgb, var(--mt) 16%, transparent);
    --glass-bg:color-mix(in srgb, var(--bg-solid) 88%, transparent);
    --track:color-mix(in srgb, var(--mt) 28%, transparent);
  }
}