/* Goose Creek Dental Clinic — design tokens
   Palette sampled from the clinic's own logo: charcoal #373737, buckskin #d0baa1. */

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/oswald-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/sourceserif4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* Metric-matched fallbacks so the swap does not shift layout. */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Helvetica Neue Condensed'), local('Arial Narrow'), local('Helvetica');
  size-adjust: 88%;
  ascent-override: 118%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%;
  ascent-override: 102%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* — Color ————————————————————————————————————— */
  --charcoal-900: oklch(0.19 0.005 70);   /* deepest ground */
  --charcoal-800: oklch(0.27 0.006 70);   /* logo charcoal, corrected */
  --charcoal-700: oklch(0.34 0.007 70);
  --buckskin-500: oklch(0.79 0.043 74);   /* logo tan */
  --buckskin-600: oklch(0.68 0.052 68);   /* tan that passes on bone */
  --bone-50:  oklch(0.975 0.005 78);
  --bone-100: oklch(0.945 0.008 78);
  --bone-200: oklch(0.905 0.009 78);

  --bg:             var(--bone-50);
  --surface:        oklch(0.995 0.003 78);
  --surface-sunk:   var(--bone-100);
  --charcoal-logo:  oklch(0.3368 0 90);   /* #373737 — sampled from the logo file itself */
  --surface-dark:   var(--charcoal-800);
  --surface-logo:   var(--charcoal-logo);  /* header and drawer: must match the lockup's own ground */
  --surface-darker: var(--charcoal-900);
  --border:         oklch(0.87 0.009 78);
  --border-strong:  oklch(0.76 0.012 78);
  --border-dark:    oklch(0.36 0.008 70);

  --text:        oklch(0.22 0.008 70);
  --text-muted:  oklch(0.44 0.010 70);
  --text-invert: var(--bone-50);
  --text-invert-muted: oklch(0.80 0.010 78);
  --accent:      var(--buckskin-500);
  --accent-ink:  var(--buckskin-600);
  --focus:       oklch(0.62 0.11 70);

  /* — Type ————————————————————————————————————— */
  --display: 'Oswald', 'Oswald Fallback', system-ui, sans-serif;
  --body: 'Source Serif 4', 'Serif Fallback', Georgia, serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1.06rem, 1.01rem + 0.24vw, 1.19rem);
  --step-1:  clamp(1.27rem, 1.16rem + 0.52vw, 1.58rem);
  --step-2:  clamp(1.52rem, 1.29rem + 1.05vw, 2.11rem);
  --step-4:  clamp(2.19rem, 1.55rem + 3.10vw, 3.75rem);

  /* — Space ———————————————————————————————————— */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(64px, 9vw, 152px);

  /* — Shape & elevation ——————————————————————— */
  --radius: 2px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px oklch(0.27 0.006 70 / 0.07),
            0 10px 26px -10px oklch(0.27 0.006 70 / 0.16);

  /* — Motion ——————————————————————————————————— */
  --enter: cubic-bezier(0.16, 1, 0.3, 1);
  --exit: cubic-bezier(0.4, 0, 1, 1);
  --hover: cubic-bezier(0.2, 0, 0, 1);
}