/*
 * Design tokens for the PuntoCole Review App.
 *
 * Themes:
 *   - Light (default)            -> :root
 *   - System dark               -> @media (prefers-color-scheme: dark) when no [data-theme] is forced
 *   - Forced light / dark       -> :root[data-theme="light"] / :root[data-theme="dark"]
 *
 * Dark is a high-contrast theme (near-black surfaces, white text) tuned to keep
 * body text at AAA contrast. data-theme is set by an inline script + theme.js.
 */

:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #1b6a57;
  --color-primary-strong: #134c3f;
  --color-on-primary: #ffffff;
  --color-accent: #b6532f;

  /* Surfaces & text */
  --color-page: #f6f3ec;
  --color-surface: #ffffff;
  --color-surface-muted: #efebe2;
  --color-surface-raised: #ffffff;
  --color-text: #1c1f1d;
  --color-muted: #5c615e;
  --color-border: #d7d1c4;
  --color-border-strong: #b7b1a2;

  /* Feedback */
  --color-danger: #a5271f;
  --color-danger-surface: #fbeeec;
  --color-warning: #7c5806;
  --color-success: #1b6a57;
  --color-focus: #1d63d6;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(28 31 29 / 8%);
  --shadow-md: 0 6px 18px rgb(28 31 29 / 10%);
  --shadow-lg: 0 16px 40px rgb(28 31 29 / 14%);

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Typography */
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition: 200ms ease;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;
}

/* Follow the system when the user has not forced a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-primary: #54d6b4;
    --color-primary-strong: #7be3c8;
    --color-on-primary: #04130e;
    --color-accent: #ff9d6e;

    --color-page: #000000;
    --color-surface: #0c0e0d;
    --color-surface-muted: #161a18;
    --color-surface-raised: #141816;
    --color-text: #ffffff;
    --color-muted: #c4ccc7;
    --color-border: #3a423e;
    --color-border-strong: #5a635e;

    --color-danger: #ff8a80;
    --color-danger-surface: #2a1310;
    --color-warning: #f4c45a;
    --color-success: #54d6b4;
    --color-focus: #8ab4ff;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 60%);
    --shadow-md: 0 6px 18px rgb(0 0 0 / 70%);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 80%);
  }
}

/* Forced light (overrides system). */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Forced dark, high contrast (overrides system). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #54d6b4;
  --color-primary-strong: #7be3c8;
  --color-on-primary: #04130e;
  --color-accent: #ff9d6e;

  --color-page: #000000;
  --color-surface: #0c0e0d;
  --color-surface-muted: #161a18;
  --color-surface-raised: #141816;
  --color-text: #ffffff;
  --color-muted: #c4ccc7;
  --color-border: #3a423e;
  --color-border-strong: #5a635e;

  --color-danger: #ff8a80;
  --color-danger-surface: #2a1310;
  --color-warning: #f4c45a;
  --color-success: #54d6b4;
  --color-focus: #8ab4ff;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 60%);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 70%);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 80%);
}