/* ============================================================
   Nine Motivations — site stylesheet
   Design tokens shared with enneagramtype.me. The nine type
   colours are fixed brand constants and are identical in both
   themes, which is why the petal mark looks the same either way.
   ============================================================ */

/* ---------- Faces (9 self-hosted, no Google Fonts request) ---------- */
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-Light.ttf") format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-LightItalic.ttf") format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-Italic.ttf") format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-Medium.ttf") format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url("/fonts/Spectral-SemiBold.ttf") format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url("/fonts/Karla-Variable.ttf") format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url("/fonts/Karla-Italic-Variable.ttf") format('truetype');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url("/fonts/Caveat-Variable.ttf") format('truetype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Ground */
  --color-bg: #EDE8DF;
  --color-surface: #F5F1E9;
  --color-surface-deep: #E5DFD3;

  /* Ink */
  --color-ink: #34312A;
  --color-muted: #5F5B51;
  --color-faint: #8A8478;

  /* Accent */
  --color-bronze: #8A6A42;
  --color-bronze-deep: #6F5433;
  --color-bronze-mid: #B0884F; /* display accents + primary button ONLY */

  --btn-primary-bg: var(--color-bronze-mid);
  --btn-primary-ink: #211D18;
  --btn-primary-hover: #9D7743;

  /* Hairlines */
  --color-line: rgba(52, 49, 42, 0.18);
  --color-line-soft: rgba(52, 49, 42, 0.09);
  --color-line-strong: rgba(52, 49, 42, 0.45);

  /* The nine — fixed brand constants */
  --color-type-1: #5B7F95;
  --color-type-2: #D4766E;
  --color-type-3: #E8A838;
  --color-type-4: #8B6FAE;
  --color-type-5: #4A8C6F;
  --color-type-6: #3B6B8C;
  --color-type-7: #E07B39;
  --color-type-8: #8B3A3A;
  --color-type-9: #6B8E6B;

  /* Status */
  --color-ok: #4A8C6F;
  --color-warn: #B5803A;
  --color-danger: #8B3A3A;

  /* Type */
  --font-display: 'Spectral', Georgia, serif;
  --font-ui: 'Karla', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Scale */
  --text-display: 3.25rem;
  --text-h1: 2.25rem;
  --text-h2: 1.5rem;
  --text-h3: 1.1875rem;
  --text-lede: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;

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

  /* Form */
  --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(52, 49, 42, 0.05), 0 4px 16px rgba(52, 49, 42, 0.05);
  --shadow-halo: 0 0 0 6px var(--color-bg), 0 0 0 7px var(--color-line);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #1C1916;
  --color-surface: #262219;
  --color-surface-deep: #14120F;
  --color-ink: #E8E3D6;
  --color-muted: #B5AE9F;
  --color-faint: #847E71;
  --color-bronze: #C49C66;
  --color-bronze-deep: #D2AC74;
  --color-bronze-mid: #C49C66;
  --btn-primary-bg: var(--color-bronze-mid);
  --btn-primary-ink: #211D18;
  --btn-primary-hover: #D2AC74;
  --color-line: rgba(232, 227, 214, 0.20);
  --color-line-soft: rgba(232, 227, 214, 0.10);
  --color-line-strong: rgba(232, 227, 214, 0.48);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.30);
  color-scheme: dark;
}