/* CtrlAltUpgrade brand tokens as CSS custom properties.
   Written by hand from tokens.json; keep the two in sync.

   Dark is the default. Light applies when:
   - an element (usually <html>) has data-theme="light", or
   - the page opts in with data-theme="auto" and the visitor's system prefers light.
   Pages without a data-theme attribute stay dark (the site's look). */

:root {
  /* Brand (shared) */
  --cau-orange: #f58545;
  --cau-coral: #fe6d72;
  --cau-orange-light: #f8b48c;
  --cau-orange-deep: #b5490f;
  --cau-orange-dark: #8a3a0c;
  --cau-orange-tint: #fff1e9;
  --cau-gradient-page: linear-gradient(#fe6d72, #f58545);

  /* Theme roles: dark (default) */
  --cau-surface-base: #222222;
  --cau-surface-raised: #333333;
  --cau-surface-sidebar: #444444;
  --cau-surface-chip: #3a3a3a;
  --cau-border: #444444;
  --cau-text-heading: #f5f5f5;
  --cau-text-body: #d5d5d5;
  --cau-text-muted: #b8b8b8;
  --cau-text-on-accent: #222222;
  --cau-accent-text: #f58545;
  --cau-accent-fill: #f58545;
  --cau-chip-text: #f8b48c;
  --cau-control-border: #f58545;
  --cau-focus: #f58545;
  --cau-shadow-card: none;
  color-scheme: dark;

  /* Type */
  --cau-font-sans: 'Poppins', Helvetica, Arial, sans-serif;
  --cau-font-mono: 'JetBrains Mono', Consolas, Menlo, monospace;
  --cau-size-xs: 12px;
  --cau-size-sm: 14px;
  --cau-size-base: 15px;
  --cau-size-lg: 18px;
  --cau-size-h3: 21px;
  --cau-size-h2: 32px;
  --cau-size-display: 48px;
  --cau-leading-body: 1.65;
  --cau-leading-heading: 1.25;

  /* Space, shape, depth */
  --cau-space-1: 4px;
  --cau-space-2: 8px;
  --cau-space-3: 12px;
  --cau-space-4: 20px;
  --cau-space-5: 30px;
  --cau-space-6: 50px;
  --cau-radius-card: 10px;
  --cau-radius-chip: 12px;
  --cau-radius-pill: 30px;
  --cau-border-width: 2px;
  --cau-shadow-button: 0 10px 10px -8px rgba(0, 0, 0, 0.3);
}

/* Theme roles: light */
[data-theme="light"] {
  --cau-surface-base: #ffffff;
  --cau-surface-raised: #faf7f5;
  --cau-surface-sidebar: #f3eeea;
  --cau-surface-chip: #fff1e9;
  --cau-border: #e3dcd6;
  --cau-text-heading: #222222;
  --cau-text-body: #3a3a3a;
  --cau-text-muted: #5c5c5c;
  --cau-text-on-accent: #ffffff;
  --cau-accent-text: #b5490f;
  --cau-accent-fill: #b5490f;
  --cau-chip-text: #8a3a0c;
  --cau-control-border: #b5490f;
  --cau-focus: #b5490f;
  --cau-shadow-card: 0 2px 8px rgba(34, 34, 34, 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --cau-surface-base: #ffffff;
    --cau-surface-raised: #faf7f5;
    --cau-surface-sidebar: #f3eeea;
    --cau-surface-chip: #fff1e9;
    --cau-border: #e3dcd6;
    --cau-text-heading: #222222;
    --cau-text-body: #3a3a3a;
    --cau-text-muted: #5c5c5c;
    --cau-text-on-accent: #ffffff;
    --cau-accent-text: #b5490f;
    --cau-accent-fill: #b5490f;
    --cau-chip-text: #8a3a0c;
    --cau-control-border: #b5490f;
    --cau-focus: #b5490f;
    --cau-shadow-card: 0 2px 8px rgba(34, 34, 34, 0.08);
    color-scheme: light;
  }
}

/* Print is always light */
@media print {
  :root, [data-theme] {
    --cau-surface-base: #ffffff;
    --cau-surface-raised: #ffffff;
    --cau-surface-sidebar: #ffffff;
    --cau-surface-chip: #ffffff;
    --cau-border: #bdbdbd;
    --cau-text-heading: #000000;
    --cau-text-body: #222222;
    --cau-text-muted: #444444;
    --cau-accent-text: #8a3a0c;
    --cau-chip-text: #8a3a0c;
    --cau-shadow-card: none;
    --cau-gradient-page: none;
  }
}