/* Black Door — design tokens
   One accent only: warm bone. Dark is the default; light must look intentional. */

:root {
  /* type */
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;

  --fs-micro: 0.6875rem;   /* 11 */
  --fs-small: 0.8125rem;   /* 13 */
  --fs-body: 0.9375rem;    /* 15 */
  --fs-lead: 1.0625rem;    /* 17 */
  --fs-h3: 1.25rem;        /* 20 */
  --fs-h2: 1.625rem;       /* 26 */
  --fs-h1: 2.125rem;       /* 34 */
  --fs-hero: 2.75rem;      /* 44 */

  --track-wide: 0.18em;
  --track-mid: 0.08em;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --gutter: 20px;

  /* radius — rounded, not bubbly */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  --tabbar-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- dark (default) ---------- */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B0C;
  --bg-elev: #111113;
  --surface: #161618;
  --surface-2: #1F1F22;
  --surface-3: #2A2A2E;
  --text: #F3EEE6;
  --text-2: rgba(243, 238, 230, 0.64);
  --text-3: rgba(243, 238, 230, 0.42);
  --hairline: rgba(243, 238, 230, 0.10);
  --hairline-strong: rgba(243, 238, 230, 0.18);
  --accent: #E6DCCB;
  --accent-soft: rgba(230, 220, 203, 0.14);
  --on-accent: #0B0B0C;
  --btn-bg: #E6DCCB;
  --btn-fg: #0B0B0C;
  --scrim: rgba(0, 0, 0, 0.55);
  --card-grad: linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,0.78) 100%);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --skeleton-a: #161618;
  --skeleton-b: #202024;
  --danger: #C96A5E;
  --success: #9DB89A;
}

/* ---------- light ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F2EC;
  --bg-elev: #FBF9F5;
  --surface: #FFFFFF;
  --surface-2: #EFE9E1;
  --surface-3: #E4DDD2;
  --text: #141311;
  --text-2: rgba(20, 19, 17, 0.64);
  --text-3: rgba(20, 19, 17, 0.42);
  --hairline: rgba(20, 19, 17, 0.10);
  --hairline-strong: rgba(20, 19, 17, 0.2);
  --accent: #6F6353;
  --accent-soft: rgba(111, 99, 83, 0.12);
  --on-accent: #F6F2EC;
  --btn-bg: #141311;
  --btn-fg: #F3EEE6;
  --scrim: rgba(20, 19, 17, 0.4);
  --card-grad: linear-gradient(180deg, rgba(20,19,17,0) 45%, rgba(20,19,17,0.7) 100%);
  --shadow: 0 10px 30px rgba(20,19,17,0.12);
  --skeleton-a: #EFE9E1;
  --skeleton-b: #E4DDD2;
  --danger: #B3503F;
  --success: #5B7A58;
}