/* ============================================================
   personal-design-system — canonical platform tokens

   Single source of truth for color / type / space / radius / elevation
   across Dave's personal (non-FSI) apps. Never hardcode a brand value;
   reference var(--ds-*).

   A restrained slate-neutral base with a "Blazing Copper" accent (after the
   2006 Mazda 3/6 metallic) and its complementary teal. Data-dense, mobile-first.

   THIS FILE IS CANONICAL AND IDENTICAL IN EVERY CONSUMING REPO.
   Do not edit it in one repo alone — edit the skill copy and re-sync all three.
   App-specific domain colors (chart series keyed to a data source, the
   photographic Zone ramp) do NOT belong here; they live in an app-owned layer.
   See SKILL.md § "Domain color is not brand color".

   ---- The two-copper-roles rule (the one thing not to get wrong) ----
   Copper cannot be one token, because a value legible as text on a light
   surface is not the same value that white button text can sit on.
     --ds-primary : SOLID FILL (button backgrounds) — stays dark in BOTH themes
                    so white text on it always passes AA.
     --ds-link    : COPPER-AS-TEXT on a surface (links, ghost buttons, active
                    nav) — dark in light mode, LIGHT in dark mode.
   Never substitute one for the other. In dark mode --ds-primary gets slightly
   lighter (#a84a20 → #b85427) while --ds-link jumps to a different value
   entirely (#e8935e). That asymmetry is deliberate, not a typo.

   ---- No remote fonts, no egress ----
   The type stack is system-only. Do not add @font-face, Google Fonts, or any
   CDN. This is a security requirement, not a preference.
   ============================================================ */

:root {
  /* ---- Native control theming ----
     `color-scheme` is what tells the BROWSER which way to paint the parts of
     the page CSS cannot reach: <select> dropdown popups, date pickers,
     scrollbars, form control internals. It must track the theme.

     A <meta name="color-scheme"> tag is NOT enough. Meta advertises which
     schemes the page supports and then follows the OS — it does not follow a
     `data-theme` toggle. Toggle the app to dark on a light OS and every native
     popup keeps painting white while our tokens colour the text light grey:
     light-grey-on-white, unreadable. That is a real bug this shipped with.

     Keep these three blocks in lockstep with the color blocks below. */
  color-scheme: light;

  /* ---- Typography (system stack — no remote fonts, no egress) ---- */
  --ds-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, monospace;

  --ds-fs-display: 1.75rem;   /* page / wordmark */
  --ds-fs-h2: 1.25rem;        /* section headers */
  --ds-fs-h3: 1.0625rem;
  --ds-fs-body: 1rem;
  --ds-fs-sm: 0.875rem;
  --ds-fs-xs: 0.75rem;
  --ds-fs-kpi: 2.25rem;       /* big dashboard numbers */

  --ds-lh-tight: 1.2;
  --ds-lh-body: 1.55;
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;

  /* ---- Accent: Blazing Copper (primary) + complementary teal ---- */
  --ds-copper: #c15a29;          /* vivid brand copper — wordmark, accents, hero series */
  --ds-primary: #a84a20;         /* solid-fill copper — white text passes AA (~5.7:1) */
  --ds-primary-strong: #8c3c18;  /* darker fill — hover/pressed */
  --ds-primary-soft: #fbe7da;    /* light copper tint — soft fills, selected rows */
  --ds-link: #a84a20;            /* copper-as-text on light surfaces */

  --ds-accent: #0f7b85;          /* complementary teal — secondary emphasis */
  --ds-accent-strong: #0b6169;
  --ds-accent-soft: #d6f0f2;

  /* ---- Neutral ramp (slate) ---- */
  --ds-ink: #0f172a;             /* slate-900 — primary text, headings, KPI values */
  --ds-text: #1e293b;            /* slate-800 — body text */
  --ds-muted: #64748b;           /* slate-500 — secondary text, labels */
  --ds-faint: #94a3b8;           /* slate-400 — placeholders, disabled */
  --ds-border: #e2e8f0;          /* slate-200 — hairlines, table rules */
  --ds-surface: #ffffff;         /* cards, inputs */
  --ds-surface-alt: #f8fafc;     /* slate-50  — striped rows, subtle panels */
  --ds-bg: #f1f5f9;              /* slate-100 — app background */

  /* ---- Feedback (warning kept gold, clearly ≠ brand copper) ---- */
  --ds-success: #16a34a;
  --ds-success-soft: #dcfce7;
  --ds-warning: #ca8a04;
  --ds-warning-soft: #fef9c3;
  --ds-danger: #dc2626;
  --ds-danger-soft: #fee2e2;
  --ds-info: #2563eb;
  --ds-info-soft: #dbeafe;

  /* ---- Categorical series hues ----
     Generic, ordered, mutually distinguishable. Apps alias these to their own
     MEANINGS in an app-owned layer (e.g. --app-series-dexa: var(--ds-series-red)).
     Copper is the hero — give it the most important series. */
  --ds-series-slate: #64748b;
  --ds-series-copper: #c15a29;
  --ds-series-teal: #0f7b85;
  --ds-series-red: #dc2626;
  --ds-series-pink: #db2777;
  --ds-series-violet: #7c3aed;
  --ds-series-target: #94a3b8;   /* dashed reference / target lines */

  /* ---- Spacing scale (4px base) ---- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-8: 3rem;

  /* ---- Radius ---- */
  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-pill: 9999px;

  /* ---- Elevation (shadows tinted slate-900, never pure black) ---- */
  --ds-shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --ds-shadow-md: 0 4px 12px rgb(15 23 42 / 10%);
  --ds-shadow-lg: 0 10px 24px rgb(15 23 42 / 14%);

  /* ---- Layout ---- */
  --ds-maxw: 960px;              /* content column cap (tables/dashboards) */
  --ds-maxw-narrow: 560px;       /* content column cap (single-column tools) */
  --ds-tap: 44px;                /* min touch target (a11y) */
}

/* ============================================================
   Dark theme — OLED-friendly slate, brightened copper/teal.
   Applies via [data-theme="dark"] or the OS preference.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;            /* paints native popups/scrollbars dark — see :root */

  --ds-copper: #e8935e;
  --ds-primary: #b85427;         /* solid fill — white text still AA */
  --ds-primary-strong: #a84a20;
  --ds-primary-soft: #3a1c0e;    /* dark copper tint */
  --ds-link: #e8935e;            /* light copper text on dark */

  --ds-accent: #2cc4ce;
  --ds-accent-strong: #5ad6de;
  --ds-accent-soft: #10343a;

  --ds-ink: #f8fafc;
  --ds-text: #e2e8f0;
  --ds-muted: #94a3b8;
  --ds-faint: #64748b;
  --ds-border: #334155;
  --ds-surface: #1e293b;
  --ds-surface-alt: #172033;
  --ds-bg: #0f172a;

  --ds-success-soft: #052e16;
  --ds-warning-soft: #3b2504;
  --ds-danger-soft: #450a0a;
  --ds-info-soft: #172554;

  --ds-series-copper: #e8935e;   /* brighter copper on dark */
  --ds-series-teal: #2cc4ce;     /* brighter teal on dark */

  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 46%);
  --ds-shadow-lg: 0 10px 24px rgb(0 0 0 / 55%);
}

/* Same values, applied from the OS preference unless the user has explicitly
   chosen light. Keep this block byte-identical to the one above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ds-copper: #e8935e;
    --ds-primary: #b85427;
    --ds-primary-strong: #a84a20;
    --ds-primary-soft: #3a1c0e;
    --ds-link: #e8935e;
    --ds-accent: #2cc4ce;
    --ds-accent-strong: #5ad6de;
    --ds-accent-soft: #10343a;
    --ds-ink: #f8fafc;
    --ds-text: #e2e8f0;
    --ds-muted: #94a3b8;
    --ds-faint: #64748b;
    --ds-border: #334155;
    --ds-surface: #1e293b;
    --ds-surface-alt: #172033;
    --ds-bg: #0f172a;
    --ds-success-soft: #052e16;
    --ds-warning-soft: #3b2504;
    --ds-danger-soft: #450a0a;
    --ds-info-soft: #172554;
    --ds-series-copper: #e8935e;
    --ds-series-teal: #2cc4ce;
    --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 46%);
    --ds-shadow-lg: 0 10px 24px rgb(0 0 0 / 55%);
  }
}