/* catflops design tokens. Four Heroku-style themes, one per page via <body data-brand> (config/themes.yml).
   Each theme is one fixed look (no OS dark-mode switch). Text tokens are >= 4.5:1 on bg and surface. */
:root {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.1;
  --leading-normal: 1.5;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}

/* A · Royal purple */
[data-brand="royal"] {
  --color-bg: #F7F5FB; --color-surface: #FFFFFF; --color-text: #1F1235; --color-muted: #5C5470; --color-border: #DDD3EE;
  --color-primary: #430098; --color-on-primary: #FFFFFF; --color-accent: #6B4FA0;
  --color-success: #15803D; --color-warn: #A16207; --color-danger: #B91C1C;
  --hero-bg: #430098; --hero-text: #FFFFFF; --hero-muted: #E4D9F7;
  --mark-cat: #FFFFFF; --mark-gpu: #A78BFA; --wordmark-accent: #FFFFFF;
}

/* B · Midnight violet (dark) */
[data-brand="midnight"] {
  color-scheme: dark;
  --color-bg: #120726; --color-surface: #1E1240; --color-text: #F3EEFF; --color-muted: #B7A9D9; --color-border: #3A2A63;
  --color-primary: #A78BFA; --color-on-primary: #120726; --color-accent: #C4B5FD;
  --color-success: #4ADE80; --color-warn: #FBBF24; --color-danger: #F87171;
  --hero-bg: #1E0B3A; --hero-text: #F3EEFF; --hero-muted: #B7A9D9;
  --mark-cat: #A78BFA; --mark-gpu: #FFFFFF; --wordmark-accent: #F3EEFF;
}

/* C · Lavender light */
[data-brand="lavender"] {
  --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-text: #2E1065; --color-muted: #5B5470; --color-border: #DCD3F0;
  --color-primary: #5B21B6; --color-on-primary: #FFFFFF; --color-accent: #5B21B6;
  --color-success: #15803D; --color-warn: #A16207; --color-danger: #B91C1C;
  --hero-bg: #F1ECFB; --hero-text: #2E1065; --hero-muted: #5B5470;
  --mark-cat: #5B21B6; --mark-gpu: #A78BFA; --wordmark-accent: #5B21B6;
}

/* D · Purple + orange */
[data-brand="ember"] {
  --color-bg: #FAF8FC; --color-surface: #FFFFFF; --color-text: #1F1235; --color-muted: #5C5470; --color-border: #E2D9EE;
  --color-primary: #C2410C; --color-on-primary: #FFFFFF; --color-accent: #3B0A7A;
  --color-success: #15803D; --color-warn: #A16207; --color-danger: #B91C1C;
  --hero-bg: #3B0A7A; --hero-text: #FFFFFF; --hero-muted: #E2D6F5;
  --mark-cat: #FF8A3D; --mark-gpu: #A78BFA; --wordmark-accent: #FF8A3D;
}