/* ============================================================
   PACKHEX — DESIGN TOKENS v2 · monochrome
   One warm-neutral scale between the two logo colours
   (#F4F1EA off-white = neutral-100, #141210 near-black = neutral-950).
   Colour appears only where it carries meaning (status).
   Optional themes swap the five "accent" tokens in section 9.
   Names map 1:1 to Tailwind v4 @theme (bg-packhex-surface…).
   ============================================================ */

:root{
  /* 1. PRIMITIVES ------------------------------------------- */
  --color-neutral-50:#FCF9F2;
  --color-neutral-100:#F4F1EA;  /* logo off-white */
  --color-neutral-200:#E6E3DC;
  --color-neutral-300:#D3D0C9;
  --color-neutral-400:#ACA9A2;
  --color-neutral-500:#88847E;
  --color-neutral-600:#6A6762;
  --color-neutral-700:#524F4B;
  --color-neutral-800:#363330;
  --color-neutral-900:#211F1C;
  --color-neutral-950:#141210;  /* logo near-black */

  /* status — muted, desaturated; small surfaces only */
  --color-moss-600:#426F4C;--color-moss-300:#92BE9A;
  --color-ochre-600:#906027;--color-ochre-300:#D9AF75;
  --color-brick-600:#9A463D;--color-brick-300:#DE958B;
  --color-slate-600:#456783;--color-slate-300:#94B5D2;

  /* optional theme primitives (not used by default) */
  --color-pine-600:#2B5748;--color-pine-300:#88B7A5;--color-pine-100:#E0EFE9;--color-pine-900:#1F2F29;

  /* 2. TYPE ------------------------------------------------- */
  --font-sans:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --font-heading:"Inter Tight",ui-sans-serif,system-ui,sans-serif; /* recommended over Sora */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-wordmark:"Sora",sans-serif; /* wordmark only, 800, -0.045em */
  --text-xs:0.75rem;--text-sm:0.8125rem;--text-base:0.875rem;--text-md:1rem;--text-lg:1.125rem;
  --text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-4xl:3rem;--text-5xl:4rem;
  --tracking-heading:-0.025em;--tracking-display:-0.035em;--tracking-caps:0.06em;

  /* 3. SPACE · 4px grid ------------------------------------- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;

  /* 4. RADIUS · one small scale ----------------------------- */
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:999px;

  /* 5. MOTION ------------------------------------------------ */
  --duration-fast:120ms;--duration-base:180ms;--ease-standard:cubic-bezier(0.2,0,0,1);
}

/* 7. SEMANTIC · LIGHT ---------------------------------------- */
:root,[data-theme="light"]{
  color-scheme:light;
  --color-packhex-background:var(--color-neutral-100);
  --color-packhex-surface:var(--color-neutral-50);
  --color-packhex-surface-raised:var(--color-neutral-50);   /* + shadow-raised */
  --color-packhex-surface-muted:var(--color-neutral-100);
  --color-packhex-border:var(--color-neutral-200);         /* hairlines, dividers */
  --color-packhex-border-strong:var(--color-neutral-500);  /* inputs, ≥3:1 */
  --color-packhex-text:var(--color-neutral-950);
  --color-packhex-text-muted:var(--color-neutral-600);
  --color-packhex-text-subtle:var(--color-neutral-500);    /* placeholders, disabled */
  --color-packhex-primary:var(--color-neutral-950);
  --color-packhex-primary-hover:var(--color-neutral-800);
  --color-packhex-primary-foreground:var(--color-neutral-50);
  --color-packhex-secondary:var(--color-neutral-200);
  --color-packhex-secondary-foreground:var(--color-neutral-950);
  --color-packhex-success:var(--color-moss-600);
  --color-packhex-warning:var(--color-ochre-600);
  --color-packhex-danger:var(--color-brick-600);
  --color-packhex-info:var(--color-slate-600);
  --color-packhex-logo:var(--color-neutral-950);
  /* accent set — monochrome by default */
  --color-packhex-focus-ring:var(--color-neutral-950);
  --color-packhex-link:var(--color-neutral-950);
  --color-packhex-selected:var(--color-neutral-200);
  --color-packhex-selected-foreground:var(--color-neutral-950);
  --color-packhex-selected-indicator:var(--color-neutral-950);
  --shadow-raised:0 1px 2px rgba(20,18,16,0.06),0 8px 24px rgba(20,18,16,0.10);
}

/* 8. SEMANTIC · DARK ----------------------------------------- */
[data-theme="dark"]{
  color-scheme:dark;
  --color-packhex-background:var(--color-neutral-950);
  --color-packhex-surface:var(--color-neutral-900);
  --color-packhex-surface-raised:var(--color-neutral-800);
  --color-packhex-surface-muted:var(--color-neutral-950);
  --color-packhex-border:var(--color-neutral-800);
  --color-packhex-border-strong:var(--color-neutral-500);
  --color-packhex-text:var(--color-neutral-100);
  --color-packhex-text-muted:var(--color-neutral-400);
  --color-packhex-text-subtle:var(--color-neutral-500);
  --color-packhex-primary:var(--color-neutral-100);
  --color-packhex-primary-hover:var(--color-neutral-300);
  --color-packhex-primary-foreground:var(--color-neutral-950);
  --color-packhex-secondary:var(--color-neutral-800);
  --color-packhex-secondary-foreground:var(--color-neutral-100);
  --color-packhex-success:var(--color-moss-300);
  --color-packhex-warning:var(--color-ochre-300);
  --color-packhex-danger:var(--color-brick-300);
  --color-packhex-info:var(--color-slate-300);
  --color-packhex-logo:var(--color-neutral-100);
  --color-packhex-focus-ring:var(--color-neutral-100);
  --color-packhex-link:var(--color-neutral-100);
  --color-packhex-selected:var(--color-neutral-800);
  --color-packhex-selected-foreground:var(--color-neutral-100);
  --color-packhex-selected-indicator:var(--color-neutral-100);
  --shadow-raised:0 1px 2px rgba(0,0,0,0.5),0 10px 28px rgba(0,0,0,0.5);
}

/* 9. OPTIONAL THEME · PINE (preview only, not default)
   A theme = these five tokens. Nothing else changes. */
[data-accent="pine"],[data-accent="pine"] [data-theme="light"]{
  --color-packhex-focus-ring:var(--color-pine-600);
  --color-packhex-link:var(--color-pine-600);
  --color-packhex-selected:var(--color-pine-100);
  --color-packhex-selected-foreground:var(--color-pine-600);
  --color-packhex-selected-indicator:var(--color-pine-600);
}
[data-accent="pine"][data-theme="dark"],[data-accent="pine"] [data-theme="dark"]{
  --color-packhex-focus-ring:var(--color-pine-300);
  --color-packhex-link:var(--color-pine-300);
  --color-packhex-selected:var(--color-pine-900);
  --color-packhex-selected-foreground:var(--color-pine-300);
  --color-packhex-selected-indicator:var(--color-pine-300);
}