/*
 * Assaria shared design tokens.
 * Single portable unit across surfaces (demo site, presentations, Python-rendered
 * reports) per T-058 decision #1/#14. Component code stays local to each surface;
 * only these CSS custom properties are shared.
 *
 * Theme selection: defaults to prefers-color-scheme, overridable via
 * :root[data-theme="dark"] / :root[data-theme="light"].
 */

:root {
  /* ---- Fonts ---- */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Light mode: "warm editorial" (default) ---- */
  --color-bg: #F0EAE0;
  --color-bg-raised: #FAF6EF;
  --color-text: #111111;
  --color-text-muted: #555555;
  --color-text-faint: #888888;
  --color-border: #cccccc;
  --color-accent: #14171a;
  --color-accent-contrast: #F0EAE0;

  --color-positive: #2f6b4f;
  --color-negative: #a13d2b;

  /* Categorical chart palette (replaces Plotly rainbow default) */
  --chart-cat-1: #14171a;
  --chart-cat-2: #2f6b4f;
  --chart-cat-3: #a13d2b;
  --chart-cat-4: #8a6d3b;
  --chart-cat-5: #55708a;
  --chart-cat-6: #888888;

  /* Sequential scale (low -> high), derived from accent */
  --chart-seq-1: #e4e7e8;
  --chart-seq-2: #b7c0c3;
  --chart-seq-3: #8a969b;
  --chart-seq-4: #5c6d73;
  --chart-seq-5: #34434a;
  --chart-seq-6: #14171a;

  --basemap-tiles: 'light';

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 4px;
  --radius-md: 10px;

  --shadow-card: 0 1px 3px rgba(17, 17, 17, 0.08), 0 4px 16px rgba(17, 17, 17, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14171a;
    --color-bg-raised: #1c2024;
    --color-text: #f3f1ec;
    --color-text-muted: #b6bcc0;
    --color-text-faint: #7c848a;
    --color-border: #2d3338;
    --color-accent: #3ddcc0;
    --color-accent-contrast: #0b0d0e;

    --color-positive: #4fd39a;
    --color-negative: #e07a5f;

    --chart-cat-1: #3ddcc0;
    --chart-cat-2: #e07a5f;
    --chart-cat-3: #f0c05a;
    --chart-cat-4: #7ea8c4;
    --chart-cat-5: #b6bcc0;
    --chart-cat-6: #9f7ee0;

    --chart-seq-1: #1c2024;
    --chart-seq-2: #223a37;
    --chart-seq-3: #285e53;
    --chart-seq-4: #2f8371;
    --chart-seq-5: #37ab90;
    --chart-seq-6: #3ddcc0;

    --basemap-tiles: 'dark';

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme='dark'] {
  --color-bg: #14171a;
  --color-bg-raised: #1c2024;
  --color-text: #f3f1ec;
  --color-text-muted: #b6bcc0;
  --color-text-faint: #7c848a;
  --color-border: #2d3338;
  --color-accent: #3ddcc0;
  --color-accent-contrast: #0b0d0e;

  --color-positive: #4fd39a;
  --color-negative: #e07a5f;

  --chart-cat-1: #3ddcc0;
  --chart-cat-2: #e07a5f;
  --chart-cat-3: #f0c05a;
  --chart-cat-4: #7ea8c4;
  --chart-cat-5: #b6bcc0;
  --chart-cat-6: #9f7ee0;

  --chart-seq-1: #1c2024;
  --chart-seq-2: #223a37;
  --chart-seq-3: #285e53;
  --chart-seq-4: #2f8371;
  --chart-seq-5: #37ab90;
  --chart-seq-6: #3ddcc0;

  --basemap-tiles: 'dark';

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme='light'] {
  --color-bg: #F0EAE0;
  --color-bg-raised: #FAF6EF;
  --color-text: #111111;
  --color-text-muted: #555555;
  --color-text-faint: #888888;
  --color-border: #cccccc;
  --color-accent: #14171a;
  --color-accent-contrast: #F0EAE0;

  --color-positive: #2f6b4f;
  --color-negative: #a13d2b;

  --chart-cat-1: #14171a;
  --chart-cat-2: #2f6b4f;
  --chart-cat-3: #a13d2b;
  --chart-cat-4: #8a6d3b;
  --chart-cat-5: #55708a;
  --chart-cat-6: #888888;

  --chart-seq-1: #e4e7e8;
  --chart-seq-2: #b7c0c3;
  --chart-seq-3: #8a969b;
  --chart-seq-4: #5c6d73;
  --chart-seq-5: #34434a;
  --chart-seq-6: #14171a;

  --basemap-tiles: 'light';

  --shadow-card: 0 1px 3px rgba(17, 17, 17, 0.08), 0 4px 16px rgba(17, 17, 17, 0.06);
}