/* ============================================================
   INDIEKOS — Design Tokens
   Foundation borrowed from the INDIE Group design system
   (type, neutral ink scale, semantic, radii, spacing, shadow).
   BRAND tokens are isolated so white-label = swap a handful of
   variables (see [data-theme] blocks), never a rewrite.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Anton&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ===== Type families ===== */
  --font-display: "Anton", "Bebas Neue", system-ui, sans-serif;
  --font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Be Vietnam Pro", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Neutral ink scale (warm, paper-leaning) — FIXED, never per-account ===== */
  --ink-0: #FFFFFF;
  --ink-50: #FAFAF7;
  --ink-100: #F2F1EC;
  --ink-200: #E7E5DD;
  --ink-300: #D2CFC5;
  --ink-400: #9A968A;
  --ink-500: #6E6A60;
  --ink-600: #54514A;
  --ink-700: #3D3B35;
  --ink-900: #1A1A17;

  /* ===== Semantic status — FIXED ===== */
  --success: #2E8B57;
  --success-bg: #E7F2EB;
  --success-fg: #1C5E3A;
  --warning: #C48A00;
  --warning-bg: #FBF1D8;
  --warning-fg: #8A6200;
  --danger: #C8442E;
  --danger-bg: #FAE6E1;
  --danger-fg: #963020;
  --info: #2E78C4;
  --info-bg: #E4EEFA;
  --info-fg: #1F558F;
  --purple: #6B53B8;
  --purple-bg: #ECE7F8;
  --purple-fg: #4C3A8C;
  --gold: #B08428;
  --gold-bg: #F7EFD8;
  --gold-fg: #7E5E16;
  --muted-bg: #EFEDE6;
  --muted-fg: #6E6A60;

  /* ===== Type scale ===== */
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 — desktop base */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 0.9375rem; /* 15 — mobile base */
  --fs-lg: 1.0625rem;   /* 17 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.75rem;    /* 28 — KPI numbers */
  --fs-4xl: 2.25rem;    /* 36 */
  --fs-5xl: 3rem;       /* 48 */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-caps: 0.08em;
  --ls-caps-lg: 0.14em;

  /* ===== Spacing (4pt grid) ===== */
  --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; --sp-10: 64px;

  /* ===== Radius ===== */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px;
  --r-pill: 999px; --r-circle: 50%;

  /* ===== Shadows (quiet, paper-like) ===== */
  --shadow-card: 0 1px 4px rgba(26,26,23,0.04);
  --shadow-1: 0 1px 2px rgba(26,26,23,0.06), 0 1px 1px rgba(26,26,23,0.04);
  --shadow-2: 0 4px 14px -4px rgba(26,26,23,0.12);
  --shadow-3: 0 16px 40px -12px rgba(26,26,23,0.22);
  --shadow-pop: 0 8px 28px -6px rgba(26,26,23,0.20);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  /* ===== Density (set by JS; controls table/list rhythm) ===== */
  --row-pad-y: 11px;
  --card-pad: 18px;
  --stat-pad: 18px;
}

/* ============================================================
   BRAND TOKENS — the ONLY thing that changes per account.
   Default = INDIEKOS evergreen + amber.
   ============================================================ */
:root,
[data-theme="evergreen"] {
  --bg: #F7F4EE;           /* warm sand */
  --surface: #FFFFFF;
  --surface-2: #FCFAF5;
  --cream: #F4F0E7;        /* table header / sunken cream */

  --brand-primary: #1E5C4A;
  --brand-primary-600: #18503F;
  --brand-primary-700: #123E30;
  --brand-primary-100: #D6E5DF;
  --brand-primary-50: #EAF2EE;
  --brand-on-primary: #FFFFFF;

  --brand-accent: #D8A23A;
  --brand-accent-600: #BF8B26;
  --brand-accent-100: #F6E7C4;
  --brand-accent-50: #FBF3DF;
  --brand-on-accent: #2A2008;

  --theme-color: #1E5C4A; /* PWA theme-color / status bar */
}

/* White-label demo: cyan lane (native INDIE Kost / INDIEKOS color) */
[data-theme="cyan"] {
  --brand-primary: #0078A8;
  --brand-primary-600: #006590;
  --brand-primary-700: #004E70;
  --brand-primary-100: #CDE9F6;
  --brand-primary-50: #E6F4FB;
  --brand-on-primary: #FFFFFF;

  --brand-accent: #F0A019;
  --brand-accent-600: #D2870A;
  --brand-accent-100: #FCE6BD;
  --brand-accent-50: #FEF4E0;
  --brand-on-accent: #2A1D02;

  --theme-color: #0078A8;
}

/* ===== Foundation element styles ===== */
* { box-sizing: border-box; }
html {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 13px; /* desktop base */
}
body { margin: 0; line-height: var(--lh-body); }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--brand-accent-100); color: var(--brand-primary-700); }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-snug); color: var(--ink-900); }