@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Mulish-Regular.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Mulish-SemiBold.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  --dusk: #22384E;
  --lamp: #F3CDA0;
  --ivory: #F7F4EB;
  --charcoal: #151714;

  --font: "Mulish", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --type-display: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);
  --type-title: clamp(1.75rem, 1.45rem + 1.35vw, 2.5rem);
  --type-heading: clamp(1.375rem, 1.27rem + 0.45vw, 1.625rem);
  --type-reading: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --type-body: 1.0625rem;
  --type-small: 0.9375rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-full: 999px;
  --radius-sheet: 28px;
  --radius-card: 20px;
  --radius-choice: 16px;
  --radius-control: 14px;
  --radius-banner: 12px;
  --radius-small: 8px;
  --motion-quick: 120ms;
  --motion-standard: 250ms;
  --motion-calm: 520ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --layout-page: 1120px;
  --layout-measure: 68ch;
  --layout-letter: 640px;
  --layout-gutter: clamp(20px, 5vw, 48px);
  --layout-section: clamp(64px, 11vw, 136px);
  --layout-header: 80px;

  --bg: #F7F4EB;
  --surface1: #FEFDF9;
  --surface2: #F0EDE1;
  --border: #E6E1D3;
  --text-primary: #272B25;
  --text-secondary: #62685C;
  --text-muted: #6C7263;
  --primary: #2A5848;
  --primary-strong: #224A3C;
  --primary-soft: #E2EDDC;
  --on-primary-soft: #224A3C;
  --accent: #8F8AC4;
  --success: #316F4F;
  --warning: #AF803F;
  --info: #3868A4;
  --on-accent-ink: #FDFCF6;
  --danger: #B93D35;
  --warning-text: #86601F;
  --focus: #2A5848;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151714;
    --surface1: #1E211C;
    --surface2: #272B24;
    --border: #343930;
    --text-primary: #F0EEE4;
    --text-secondary: #B4B9AC;
    --text-muted: #979C8C;
    --primary: #8FC4AC;
    --primary-strong: #A6D4C0;
    --primary-soft: #283A34;
    --on-primary-soft: #CDE5D9;
    --accent: #A9A4DA;
    --success: #7FBB90;
    --warning: #D8A863;
    --info: #7EA9DC;
    --on-accent-ink: #101F1A;
    --danger: #E8786E;
    --warning-text: #D8A863;
    --focus: #8FC4AC;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151714;
  --surface1: #1E211C;
  --surface2: #272B24;
  --border: #343930;
  --text-primary: #F0EEE4;
  --text-secondary: #B4B9AC;
  --text-muted: #979C8C;
  --primary: #8FC4AC;
  --primary-strong: #A6D4C0;
  --primary-soft: #283A34;
  --on-primary-soft: #CDE5D9;
  --accent: #A9A4DA;
  --success: #7FBB90;
  --warning: #D8A863;
  --info: #7EA9DC;
  --on-accent-ink: #101F1A;
  --danger: #E8786E;
  --warning-text: #D8A863;
  --focus: #8FC4AC;
}
:root[data-theme="light"] { color-scheme: light; }

.on-dusk {
  color-scheme: dark;
  --bg: var(--dusk);
  --text-primary: var(--ivory);
  --text-secondary: #B4B9AC;
  --primary: var(--lamp);
  --primary-strong: var(--lamp);
  --on-accent-ink: var(--dusk);
  --border: #979C8C;
  --focus: var(--lamp);
}