/* Tasman monochrome ColorScheme + TasmanThemeExtension — parity with app */

:root {
  color-scheme: light dark;

  /* ColorScheme light */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --color-surface-container-low: #ffffff;
  --color-surface-container: #ffffff;
  --color-surface-container-high: #f0f0f0;
  --color-surface-container-highest: #ffffff;
  --color-on-surface-variant: #000000;
  --color-outline: #000000;
  --color-outline-variant: #000000;
  --color-error: #000000;
  --color-on-error: #ffffff;
  --color-scrim: #000000;

  /* Extension light */
  --color-frosted-fill: rgba(255, 255, 255, 0.15);
  --color-frosted-fill-panel: rgba(255, 255, 255, 0.7);
  --color-frosted-border: rgba(0, 0, 0, 0.18);
  --color-chip-selected: #eeeeee;
  --color-chip-active: #bdbdbd;
  --color-panel-capsule: #f0f0f0;
  --color-list-row-border: rgba(0, 0, 0, 0.18);
  --color-placeholder: rgba(0, 0, 0, 0.54);
  --color-destructive-border: #ff0000;

  /* Semantic aliases for CMS */
  --color-text: var(--color-on-surface);
  --color-text-muted: var(--color-placeholder);
  --color-border: var(--color-list-row-border);
  --color-surface-elevated: var(--color-surface-container-highest);
  --color-link: var(--color-on-surface);
  --color-danger: var(--color-destructive-border);
  --color-warning: var(--color-placeholder);
  --color-brand: var(--color-primary);
  --color-brand-accent: var(--color-on-surface-variant);

  --font-display: "Google Sans", system-ui, sans-serif;
  --font-body: "Google Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --space-1: 0.125rem; /* 2 */
  --space-2: 0.25rem; /* 4 */
  --space-3: 0.5rem; /* 8 */
  --space-4: 0.75rem; /* 12 */
  --space-5: 1rem; /* 16 */
  --space-6: 1.25rem; /* 20 */
  --space-7: 1.5rem; /* 24 */
  --space-8: 2.25rem; /* 36 */
  --space-inset: 1.5625rem; /* 25 — panel inset */

  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.25rem; /* 20 */
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  --leading-tight: 1.25;
  --leading-body: 1.25;
  --leading-prose: 1.5;

  --radius-sm: 8px;
  --radius-md: 15px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  --container: 72rem;
  --prose-width: 720px;

  --bp-sm: 360px;
  --bp-md: 768px;
  --bp-lg: 1280px;
  --bp-xl: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #f0f0f0;
    --color-on-primary: #18191c;
    --color-surface: #18191c;
    --color-on-surface: #e6e6e6;
    --color-surface-container-low: #1a1d21;
    --color-surface-container: #1f1f24;
    --color-surface-container-high: #2d2d32;
    --color-surface-container-highest: #383840;
    --color-on-surface-variant: #ababad;
    --color-outline: rgba(255, 255, 255, 0.18);
    --color-outline-variant: rgba(255, 255, 255, 0.1);
    --color-error: #e5534b;
    --color-on-error: #18191c;
    --color-scrim: rgba(0, 0, 0, 0.6);

    --color-frosted-fill: rgba(255, 255, 255, 0.08);
    --color-frosted-fill-panel: rgba(255, 255, 255, 0.2);
    --color-frosted-border: rgba(255, 255, 255, 0.15);
    --color-chip-selected: #383840;
    --color-chip-active: #4a4a52;
    --color-panel-capsule: #2d2d32;
    --color-list-row-border: rgba(255, 255, 255, 0.12);
    --color-placeholder: #8c8c8c;
    --color-destructive-border: #e5534b;

    --color-text: var(--color-on-surface);
    --color-text-muted: var(--color-on-surface-variant);
    --color-border: var(--color-list-row-border);
    --color-surface-elevated: var(--color-surface-container);
    --color-link: var(--color-on-surface);
    --color-danger: var(--color-error);
    --color-warning: var(--color-placeholder);
    --color-brand: var(--color-primary);
    --color-brand-accent: var(--color-on-surface-variant);
  }
}

html[data-theme="dark"] {
  --color-primary: #f0f0f0;
  --color-on-primary: #18191c;
  --color-surface: #18191c;
  --color-on-surface: #e6e6e6;
  --color-surface-container-low: #1a1d21;
  --color-surface-container: #1f1f24;
  --color-surface-container-high: #2d2d32;
  --color-surface-container-highest: #383840;
  --color-on-surface-variant: #ababad;
  --color-outline: rgba(255, 255, 255, 0.18);
  --color-outline-variant: rgba(255, 255, 255, 0.1);
  --color-error: #e5534b;
  --color-on-error: #18191c;
  --color-scrim: rgba(0, 0, 0, 0.6);

  --color-frosted-fill: rgba(255, 255, 255, 0.08);
  --color-frosted-fill-panel: rgba(255, 255, 255, 0.2);
  --color-frosted-border: rgba(255, 255, 255, 0.15);
  --color-chip-selected: #383840;
  --color-chip-active: #4a4a52;
  --color-panel-capsule: #2d2d32;
  --color-list-row-border: rgba(255, 255, 255, 0.12);
  --color-placeholder: #8c8c8c;
  --color-destructive-border: #e5534b;

  --color-text: var(--color-on-surface);
  --color-text-muted: var(--color-on-surface-variant);
  --color-border: var(--color-list-row-border);
  --color-surface-elevated: var(--color-surface-container);
  --color-link: var(--color-on-surface);
  --color-danger: var(--color-error);
  --color-warning: var(--color-placeholder);
  --color-brand: var(--color-primary);
  --color-brand-accent: var(--color-on-surface-variant);
}