/* Design tokens - "Quiet Midnight" system (approved redesign).
   One navy surface scale + one amber accent; hierarchy comes from spacing,
   type, and surface elevation - never from category colors.
   Legacy token names (--bg, --surface, --text, --text-2, --border, --accent,
   --accent-tint, --overlay, --heat-*) are kept so existing rules keep working. */

:root {
  /* Foundations (light counterpart of Quiet Midnight, navy-tinted) */
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #e9edf4;
  --surface-3: #dde3ee;

  /* Structure */
  --border: #d7dde8;
  --border-strong: #aeb9cb;
  --divider: rgba(22, 32, 46, 0.12);

  /* Content */
  --text: #16202e;
  --text-2: #46556a;
  --text-3: #5c6c82;

  /* Brand accent (amber): --accent is the text/icon-safe shade,
     --accent-strong is the button/fill shade with --on-accent text. */
  --accent: #8a6210;
  --accent-hover: #a1741a;
  --accent-strong: #dfa33a;
  --accent-strong-hover: #e8b34f;
  --on-accent: #131a26;
  --accent-tint: rgba(138, 98, 16, 0.1);
  --accent-border: rgba(138, 98, 16, 0.38);

  /* Restrained semantics: small indicators and feedback only */
  --success: #2f7d58;
  --success-tint: rgba(47, 125, 88, 0.12);
  --danger: #b54444;
  --danger-tint: rgba(181, 68, 68, 0.1);
  --info: #3a6b99;
  --info-tint: rgba(58, 107, 153, 0.12);

  --overlay: rgba(22, 32, 46, 0.4);
  --shadow-float: 0 8px 24px rgba(22, 32, 46, 0.14); /* floating layers only */

  /* Heatmap: progress is amber, at rising opacity */
  --heat-0: rgba(92, 108, 130, 0.14);
  --heat-1: rgba(176, 125, 30, 0.25);
  --heat-2: rgba(176, 125, 30, 0.5);
  --heat-3: rgba(176, 125, 30, 0.75);
  --heat-4: #b07d1e;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-sheet: 22px;

  --dur: 200ms;
  --dur-fast: 140ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --card-pad: 16px;
  --font: 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', Tahoma, sans-serif;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --card-pad: 20px;
  }
}

:root[data-theme='dark'] {
  --bg: #080d17;
  --surface: #101827;
  --surface-2: #162033;
  --surface-3: #1c2940;
  --border: #24324a;
  --border-strong: #34445f;
  --divider: rgba(184, 193, 209, 0.12);
  --text: #f7f9fc;
  --text-2: #b8c1d1;
  --text-3: #7f8ba0;
  --accent: #dfa33a;
  --accent-hover: #e8b34f;
  --accent-strong: #dfa33a;
  --accent-strong-hover: #e8b34f;
  --on-accent: #080d17;
  --accent-tint: rgba(223, 163, 58, 0.14);
  --accent-border: rgba(223, 163, 58, 0.38);
  --success: #55b88a;
  --success-tint: rgba(85, 184, 138, 0.13);
  --danger: #d97878;
  --danger-tint: rgba(217, 120, 120, 0.13);
  --info: #7fa6cf;
  --info-tint: rgba(127, 166, 207, 0.13);
  --overlay: rgba(4, 7, 13, 0.6);
  --shadow-float: 0 8px 24px rgba(4, 7, 13, 0.5);
  --heat-0: rgba(127, 139, 160, 0.16);
  --heat-1: rgba(223, 163, 58, 0.25);
  --heat-2: rgba(223, 163, 58, 0.5);
  --heat-3: rgba(223, 163, 58, 0.75);
  --heat-4: #dfa33a;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --bg: #080d17;
    --surface: #101827;
    --surface-2: #162033;
    --surface-3: #1c2940;
    --border: #24324a;
    --border-strong: #34445f;
    --divider: rgba(184, 193, 209, 0.12);
    --text: #f7f9fc;
    --text-2: #b8c1d1;
    --text-3: #7f8ba0;
    --accent: #dfa33a;
    --accent-hover: #e8b34f;
    --accent-strong: #dfa33a;
    --accent-strong-hover: #e8b34f;
    --on-accent: #080d17;
    --accent-tint: rgba(223, 163, 58, 0.14);
    --accent-border: rgba(223, 163, 58, 0.38);
    --success: #55b88a;
    --success-tint: rgba(85, 184, 138, 0.13);
    --danger: #d97878;
    --danger-tint: rgba(217, 120, 120, 0.13);
    --info: #7fa6cf;
    --info-tint: rgba(127, 166, 207, 0.13);
    --overlay: rgba(4, 7, 13, 0.6);
    --shadow-float: 0 8px 24px rgba(4, 7, 13, 0.5);
    --heat-0: rgba(127, 139, 160, 0.16);
    --heat-1: rgba(223, 163, 58, 0.25);
    --heat-2: rgba(223, 163, 58, 0.5);
    --heat-3: rgba(223, 163, 58, 0.75);
    --heat-4: #dfa33a;
    color-scheme: dark;
  }
}