/* ============================================================================
   Sutton Studio harness v1 — design tokens (light + dark)
   SINGLE SOURCE OF TRUTH for all styling. Reference these vars everywhere.
   Do NOT hard-code colors/spacing per screen. Do NOT re-decide styling.

   Light is the default (it mirrors Sutton's shell). Dark mode re-values the
   SAME tokens under :root[data-theme="dark"], so a component written on tokens
   works in both themes for free. Switch with setTheme('light'|'dark'|'system')
   (dom.js); embedded apps follow Sutton's own setting.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.45;
  --tracking-tight: -0.01em;

  /* ---- Cream palette (warm neutrals; apps are moving from gray to cream) --- */
  --cream-25: #fdfcfb;
  --cream-50: #fcfaf8;
  --cream-100: #faf6f3;
  --cream-200: #f4ede6;
  --cream-300: #eadfd4;
  --cream-400: #d9c9b8;
  --cream-500: #b8a48f;
  --cream-600: #8f7b66;
  --cream-700: #6b5a49;

  /* ---- Core colors ------------------------------------------------------- */
  /* A WARM "stone" neutral scale (Sutton's ag-Grid theme), with cream surfaces. */
  --color-bg: #ffffff;
  --color-canvas: var(--cream-50);      /* page canvas behind cards */
  --color-text: #0c0a09;                /* stone-950 */
  --color-label: #78716c;               /* stone-500 labels / secondary text */
  --color-muted: #a8a29e;               /* stone-400 placeholder / "None" */
  --color-border: #e7e5e4;              /* stone-200 hairline borders */
  --color-border-faint: rgba(0, 0, 0, 0.06); /* table grid lines */
  --color-surface-alt: var(--cream-200); /* selected / active fill (active tab, pressed toggle, menu hover) */
  --color-surface-cream: var(--cream-100); /* cream fill (group rows, chips, tiles) */
  --color-hover: var(--cream-50);       /* row / button hover */
  --color-danger-text: #dc2626;
  --color-success-text: #15803d;
  --color-warn-text: #c2410c;

  /* ---- Buttons ------------------------------------------------------------ */
  /* Primary = the gradient call to action. White = the default button. */
  --grad-primary: linear-gradient(135deg, #7c3aed 0%, #5b5bf6 48%, #2b7fff 100%);
  --grad-primary-hover: linear-gradient(135deg, #8b4cf5 0%, #6b6bff 48%, #4a92ff 100%);
  --btn-primary-bg: #5b5bf6;            /* solid fallback / focus ring tint */
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 1px 2px rgba(76, 61, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --btn-secondary-bg: var(--cream-100);     /* the soft (secondary) button: cream, not gray */
  --btn-secondary-hover: var(--cream-200);
  --btn-secondary-border: transparent;
  --btn-secondary-text: #0c0a09;

  /* ---- Accent / links / toggles ------------------------------------------ */
  --color-accent: #2b7fff;
  --color-accent-bright: #2b7fff;
  --color-accent-soft: #eff6ff;
  --chart-1: #3b82f6;                   /* single-series chart marks (validated vs the light surface) */
  /* Categorical series, in this fixed order (never cycled; a 9th series folds into "Other").
     Validated for color-blind separation; slot 1 is --chart-1. Magenta, yellow and aqua are
     under 3:1 on white, so charts always ship a legend, end labels and a table view. */
  --chart-cat-1: var(--chart-1); --chart-cat-2: #eb6834; --chart-cat-3: #1baf7a; --chart-cat-4: #eda100;
  --chart-cat-5: #e87ba4;        --chart-cat-6: #008300; --chart-cat-7: #6250d6; --chart-cat-8: #e34948;

  /* ---- Tabs --------------------------------------------------------------- */
  --tab-active-color: #1c1917;
  --tab-inactive-color: #4d4944;
  --tab-indicator-height: 1px;

  /* ---- Soft status tones (banners, mention chips, inline hints) ------------ */
  --pill-blue-bg: #dbeafe;   --pill-blue-text: #1d4ed8;
  --pill-gray-bg: #f1f1f3;   --pill-gray-text: #52525b;
  --pill-green-bg: #dcfce7;  --pill-green-text: #15803d;
  --pill-red-bg: #fee2e2;    --pill-red-text: #b91c1c;
  --pill-amber-bg: #ffedd5;  --pill-amber-text: #c2410c;
  --pill-yellow-bg: #fef9c3; --pill-yellow-text: #a16207;
  --pill-violet-bg: #ede9fe; --pill-violet-text: #7f22fe;

  /* ---- Option pills (THE pill look; cp-projects detail screen) ------------ */
  --opt-ink: #1e1e1e;
  --opt-gray: #e4e4e4;
  --opt-red: #ea7e6c;
  --opt-orange: #f09648;
  --opt-amber: #eab44e;
  --opt-yellow: #f6d236;
  --opt-lime: #c0de7e;
  --opt-green: #84cc84;
  --opt-teal: #72ccb4;
  --opt-cyan: #9cead2;
  --opt-blue: #8aaef6;
  --opt-indigo: #aea2f6;
  --opt-purple: #c684de;
  --opt-violet: var(--opt-purple);   /* older name, kept as an alias */
  --opt-magenta: #f6b4fc;
  --opt-pink: #ea90b4;
  --opt-salmon: #f6c0b4;
  --opt-slate: #9c9c9c;
  --radius-opt: 5px;

  /* ---- Feedback (banners, toasts) ----------------------------------------- */
  --banner-bg: #eff6ff;
  --banner-border: #bfdbfe;
  --banner-text: #0c0a09;
  --banner-link: #2b7fff;
  --color-danger-border: #fca5a5;
  --color-danger-strong: #7f1d1d;
  --color-warn-border: #fdba74;
  --color-warn-strong: #7c2d12;
  --color-success-border: #86efac;
  --color-success-strong: #14532d;
  --grad-info: linear-gradient(135deg, #7c3aed, #2b7fff 60%, #ec4899);
  --grad-success: linear-gradient(135deg, #10b981, #14b8a6);
  --grad-error: linear-gradient(135deg, #f43f5e, #fb923c);
  --grad-warn: linear-gradient(135deg, #f59e0b, #f97316);

  /* ---- Notification pills (counts that need attention) ---------------------
     notif(n, { tone }) uses these; change them to restyle every count at once. */
  --notif-attention-bg: #fde8cf;  --notif-attention-ink: #b45309;
  --notif-danger-bg: #ef4444;     --notif-danger-ink: #ffffff;
  --notif-accent-bg: var(--grad-primary); --notif-accent-ink: #ffffff;
  --notif-neutral-bg: var(--cream-200);   --notif-neutral-ink: var(--color-label);

  /* ---- Overlays + focus ---------------------------------------------------- */
  /* Modal backdrop: set --scrim-opacity (or setScrimOpacity(n) in dom.js;
     modal(..., { scrim: n }) for one dialog). */
  --scrim-opacity: 0.16;
  --color-scrim: rgb(28 25 23 / var(--scrim-opacity));
  --color-scrim-soft: rgb(28 25 23 / calc(var(--scrim-opacity) * 0.8));
  --color-on-accent: #ffffff;
  --focus-ring: 0 0 0 2px rgba(43, 127, 255, 0.18);
  --glass-bg: rgba(255, 255, 255, 0.82);

  /* ---- Shape ------------------------------------------------------------- */
  --radius-input: 8px;
  --radius-card: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* ---- Shadows ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);

  /* ---- Density / spacing ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --row-height: 36px;
  --control-height: 34px;
  --btn-height: 28px;
  --icon-size: 16px;
  --doc-max-width: 1040px;
  --toolbar-control-h: 28px;
  --toolbar-search-w: 200px;

  /* ---- Page backgrounds ---------------------------------------------------- */
  --color-list-bg: var(--color-bg);   /* list/table pages: white */
  --color-app-bg: var(--cream-50);    /* card views (.app--canvas): cream canvas */
  --header-h: 93px;
  --radius-composer: 14px;

  /* ---- Accent tone for data visuals (sparklines, calendars): cream by
     default; add .tone-blue on a component (or an ancestor) for blue. ------ */
  --tone-line: var(--cream-600);
  --tone-fill: var(--cream-100);
  --tone-sel: var(--cream-300);
  --tone-sel-ink: var(--color-text);
  --tone-range: var(--cream-100);
  --tone-ring: var(--cream-500);

  /* ---- Tables ------------------------------------------------------------- */
  --table-group-bg: var(--cream-100);   /* group header rows */
  --table-current-bg: var(--cream-50);  /* the current-period column */

  /* ---- AI / checkpoint gradients (use only for AI or checkpoint surfaces) -- */
  --grad-ai: linear-gradient(90deg, #7c3aed, #2b7fff 55%, #ec4899);
  --grad-ai-tint: linear-gradient(90deg, rgba(124, 58, 237, .10), rgba(43, 127, 255, .10), rgba(236, 72, 153, .10), rgba(124, 58, 237, .10));
  --grad-check: linear-gradient(90deg, #2b7fff, #10b981);
  --color-ai: #7c3aed;
}

/* ============================================================================
   Dark theme: the same tokens, re-valued (warm stone, inverted).
   ============================================================================ */
/* .theme-dark makes a dark island inside a light page (the wallboard). */
:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --cream-25: #1b1816;
  --cream-50: #1d1a17;
  --cream-100: #221e1b;
  --cream-200: #2a2521;
  --cream-300: #352f2a;
  --cream-400: #4a4139;
  --cream-500: #8a7a6a;
  --cream-600: #a8957f;
  --cream-700: #c9b8a4;

  --color-bg: #161412;
  --color-canvas: #110f0e;
  --color-text: #f5f5f4;
  --color-label: #a8a29e;
  --color-muted: #78716c;
  --color-border: #2f2b28;
  --color-border-faint: rgba(255, 255, 255, 0.07);
  --color-surface-alt: var(--cream-200);
  --color-surface-cream: var(--cream-100);
  --color-hover: var(--cream-50);
  --color-danger-text: #f87171;
  --color-success-text: #4ade80;
  --color-warn-text: #fb923c;

  --btn-primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --btn-secondary-bg: var(--cream-100);
  --btn-secondary-hover: var(--cream-200);
  --btn-secondary-text: #f5f5f4;
  --color-accent: #4a92ff;
  --color-accent-bright: #4a92ff;
  --color-accent-soft: rgba(74, 146, 255, 0.14);
  --chart-1: #4a92ff;
  --chart-cat-1: var(--chart-1); --chart-cat-2: #d95926; --chart-cat-3: #199e70; --chart-cat-4: #c98500;
  --chart-cat-5: #d55181;        --chart-cat-6: #008300; --chart-cat-7: #9085e9; --chart-cat-8: #e66767;
  --tab-active-color: #f5f5f4;
  --tab-inactive-color: #a8a29e;

  --pill-blue-bg: rgba(59, 130, 246, 0.18);   --pill-blue-text: #93c5fd;
  --pill-gray-bg: rgba(255, 255, 255, 0.08);  --pill-gray-text: #d6d3d1;
  --pill-green-bg: rgba(34, 197, 94, 0.16);   --pill-green-text: #86efac;
  --pill-red-bg: rgba(239, 68, 68, 0.16);     --pill-red-text: #fca5a5;
  --pill-amber-bg: rgba(249, 115, 22, 0.16);  --pill-amber-text: #fdba74;
  --pill-yellow-bg: rgba(234, 179, 8, 0.16);  --pill-yellow-text: #fde047;
  --pill-violet-bg: rgba(139, 92, 246, 0.2);  --pill-violet-text: #c4b5fd;

  /* Option pills: the same hues, deepened, with light ink. */
  --opt-ink: #f5f5f4;
  --opt-gray: #3a3633;
  --opt-red: color-mix(in srgb, #ea7e6c 52%, #161412);
  --opt-orange: color-mix(in srgb, #f09648 52%, #161412);
  --opt-amber: color-mix(in srgb, #eab44e 50%, #161412);
  --opt-yellow: color-mix(in srgb, #f6d236 46%, #161412);
  --opt-lime: color-mix(in srgb, #c0de7e 46%, #161412);
  --opt-green: color-mix(in srgb, #84cc84 50%, #161412);
  --opt-teal: color-mix(in srgb, #72ccb4 50%, #161412);
  --opt-cyan: color-mix(in srgb, #9cead2 44%, #161412);
  --opt-blue: color-mix(in srgb, #8aaef6 52%, #161412);
  --opt-indigo: color-mix(in srgb, #aea2f6 50%, #161412);
  --opt-purple: color-mix(in srgb, #c684de 50%, #161412);
  --opt-violet: var(--opt-purple);   /* older name, kept as an alias */
  --opt-magenta: color-mix(in srgb, #f6b4fc 44%, #161412);
  --opt-pink: color-mix(in srgb, #ea90b4 50%, #161412);
  --opt-salmon: color-mix(in srgb, #f6c0b4 46%, #161412);
  --opt-slate: #57524d;

  --banner-bg: rgba(59, 130, 246, 0.12);
  --banner-border: rgba(59, 130, 246, 0.35);
  --banner-text: #f5f5f4;
  --banner-link: #60a5fa;
  --color-danger-border: rgba(248, 113, 113, 0.4);
  --color-danger-strong: #fecaca;
  --color-warn-border: rgba(251, 146, 60, 0.4);
  --color-warn-strong: #fed7aa;
  --color-success-border: rgba(74, 222, 128, 0.35);
  --color-success-strong: #bbf7d0;

  --scrim-opacity: 0.45;
  --color-scrim: rgb(0 0 0 / var(--scrim-opacity));
  --color-scrim-soft: rgb(0 0 0 / calc(var(--scrim-opacity) * 0.85));
  --focus-ring: 0 0 0 2px rgba(74, 146, 255, 0.35);
  --glass-bg: rgba(30, 27, 25, 0.82);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

  --table-group-bg: var(--cream-100);
  --table-current-bg: var(--cream-50);
  --tone-sel: var(--cream-400);
  --notif-attention-bg: rgba(245, 158, 11, 0.2);  --notif-attention-ink: #fcd34d;
  --notif-danger-bg: #dc2626;
}

/* Blue tone (opt-in): sparklines, calendars and ranges in the accent blue. */
.tone-blue {
  --tone-line: var(--color-accent);
  --tone-fill: var(--color-accent-soft);
  --tone-sel: var(--color-accent);
  --tone-sel-ink: var(--color-on-accent);
  --tone-range: var(--color-accent-soft);
  --tone-ring: var(--color-accent);
}
.theme-dark { color-scheme: dark; color: var(--color-text); background: var(--color-bg); }