/* ============================================================
   Humans+ Design Tokens
   Single source of truth for both themes.
   Light theme is the default; dark theme overrides via
   [data-theme="dark"] and prefers-color-scheme.
   ============================================================ */

:root {
  /* Surfaces */
  --surface-base: #F7F8F5;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EDF1EC;
  --surface-overlay: rgba(19, 33, 31, 0.55);

  /* Text */
  --text-primary: #13211F;
  --text-secondary: #50605B;
  --text-tertiary: #5C6B65;

  /* Lines */
  --line-subtle: #D7DED8;
  --line-strong: #B9C4BD;

  /* Brand */
  --brand-primary: #136F63;
  --brand-strong: #075447;
  --brand-soft: #E1F0EC;

  /* Accents */
  --accent-warm: #D97845;
  --accent-violet: #6B5FD1;
  --accent-warm-soft: #F7E6DA;
  --accent-violet-soft: #E9E6FA;

  /* Status */
  --status-positive: #18794E;
  --status-caution: #9A5A00;
  --status-critical: #B42318;
  --status-positive-soft: #E2F3EA;
  --status-caution-soft: #F7EDD9;
  --status-critical-soft: #F9E2E0;

  /* Focus */
  --focus-ring: #075447;

  /* Typography */
  --font-sans: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Metrics */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --content-max: 1280px;
  --measure: 68ch;

  --shadow-sm: 0 1px 2px rgba(19, 33, 31, 0.06), 0 1px 3px rgba(19, 33, 31, 0.08);
  --shadow-md: 0 4px 12px rgba(19, 33, 31, 0.08), 0 2px 6px rgba(19, 33, 31, 0.06);
  --shadow-lg: 0 12px 32px rgba(19, 33, 31, 0.12);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 240ms;

  color-scheme: light;
}

/* Dark theme */
[data-theme="dark"] {
  --surface-base: #0B1010;
  --surface-raised: #121A1A;
  --surface-sunken: #071010;
  --surface-overlay: rgba(7, 16, 16, 0.6);

  --text-primary: #F1F5F0;
  --text-secondary: #AEBAB4;
  --text-tertiary: #8A9A93;

  --line-subtle: #273632;
  --line-strong: #3A4C46;

  --brand-primary: #6DE4C7;
  --brand-strong: #A3F0DB;
  --brand-soft: #12322C;

  --accent-warm: #FFAA7B;
  --accent-violet: #B9AFFF;
  --accent-warm-soft: #3A2418;
  --accent-violet-soft: #241F3D;

  --status-positive: #62D79C;
  --status-caution: #F7C65C;
  --status-critical: #FF8B83;
  --status-positive-soft: #12301F;
  --status-caution-soft: #33290F;
  --status-critical-soft: #3A1A18;

  --focus-ring: #C9FFEF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* Respect system preference when no explicit choice is stored.
   The inline theme script sets data-theme before paint to avoid flash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-base: #0B1010;
    --surface-raised: #121A1A;
    --surface-sunken: #071010;
    --surface-overlay: rgba(7, 16, 16, 0.6);

    --text-primary: #F1F5F0;
    --text-secondary: #AEBAB4;
    --text-tertiary: #8A9A93;

    --line-subtle: #273632;
    --line-strong: #3A4C46;

    --brand-primary: #6DE4C7;
    --brand-strong: #A3F0DB;
    --brand-soft: #12322C;

    --accent-warm: #FFAA7B;
    --accent-violet: #B9AFFF;
    --accent-warm-soft: #3A2418;
    --accent-violet-soft: #241F3D;

    --status-positive: #62D79C;
    --status-caution: #F7C65C;
    --status-critical: #FF8B83;
    --status-positive-soft: #12301F;
    --status-caution-soft: #33290F;
    --status-critical-soft: #3A1A18;

    --focus-ring: #C9FFEF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}