/*
 * BureauDeGarde Aurora foundations
 * Synchronized with Figma: BureauDeGarde — Aurora Design System
 * https://www.figma.com/design/sTrs2nMv6aXLGyIZRbshr1
 */
:root {
  color-scheme: light;

  /* Aurora Light semantic colors */
  --bg: #eef4fb;
  --surface: #ffffff;
  --surface-soft: #e8eeff;
  --surface-strong: #dff2ff;
  --text: #11182a;
  --muted: #5e6c86;
  --primary: #4f72e8;
  --primary-2: #718dec;
  --mint: #62cbb6;
  --mint-strong: #1f8a72;
  --line: rgba(156, 177, 211, .65);

  /* Layout scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Typography scale */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-size: clamp(4.6rem, 7.8vw, 8.5rem);
  --font-h1-size: 3rem;
  --font-h2-size: 2.25rem;
  --font-h3-size: 1.5rem;

  /* Elevation */
  --shadow-subtle: 0 6px 20px rgba(51, 79, 128, .06);
  --shadow-card: 0 14px 44px rgba(51, 79, 128, .10);
  --shadow-floating: 0 18px 54px rgba(46, 71, 117, .14), 0 4px 16px rgba(79, 114, 232, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11182a;
  --surface: #1a2439;
  --surface-soft: #202c43;
  --surface-strong: #2b3850;
  --text: #ffffff;
  --muted: #c3d2ec;
  --primary: #7897ff;
  --primary-2: #718dec;
  --mint: #62cbb6;
  --mint-strong: #7fe3c9;
  --line: rgba(86, 104, 138, .6);
  --shadow-subtle: 0 6px 20px rgba(3, 9, 22, .14);
  --shadow-card: 0 14px 44px rgba(3, 9, 22, .22);
  --shadow-floating: 0 18px 54px rgba(3, 9, 22, .28), 0 4px 16px rgba(120, 151, 255, .07);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
.page-heading h1,
.brief-main h2,
.metric-value,
.card-head h2,
.card-head h3,
.card h3,
.step h3,
.product-copy h3 {
  font-family: var(--font-sans);
}

.nav,
.daily-brief,
.final-box,
.product,
.card,
.step,
.modal,
.drawer,
.command-box {
  border-radius: var(--radius-lg);
}

.button,
.btn,
.icon-button,
.search-trigger,
input,
select,
textarea {
  border-radius: var(--radius-md);
}

.card,
.step {
  box-shadow: var(--shadow-card);
}

.nav,
.modal,
.drawer,
.command-box {
  box-shadow: var(--shadow-floating);
}

@media (max-width: 680px) {
  :root {
    --font-display-size: 4.25rem;
  }

  .nav,
  .daily-brief,
  .final-box,
  .product,
  .card,
  .step {
    border-radius: var(--radius-md);
  }
}