/* HBT Smart Tools - design tokens v2 ("The Drawer"). One accent (ember). Dark-first panel, light + dark themes.
   Contrast notes (checked): ink on bg >= 15:1, ink-2 on surface-2 >= 8:1, accent on bg >= 5.4:1 (light) / 7:1 (dark),
   ember-ink on ember bar >= 6.5:1, panel-ink-2 on panel >= 9:1. */
/* Self-hosted, licence-free (SIL OFL 1.1) faces. Licences: css/fonts/OFL-*.txt. No external font calls. */
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* metric-matched fallback so the swap does not shift layout */
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"); size-adjust: 94%; ascent-override: 103%; descent-override: 26%; line-gap-override: 0%; }
:root {
  color-scheme: light;
  --bg: #F8F4EC;          /* warm paper */
  --surface: #FFFFFF;
  --surface-2: #F1EADD;   /* sand */
  --ink: #1A1510;
  --ink-2: #4A4239;
  --line: #E2D7C4;
  --accent: #B3441C;      /* ember (text-safe on paper) */
  --accent-ink: #FFFFFF;
  --accent-soft: #F8E4D8;
  --focus: #1A1510;
  --ok: #2F6B3F;

  /* the drawer panel is dark in BOTH themes */
  --panel: #16120E;
  --panel-2: #201A14;
  --panel-3: #2A231B;
  --panel-ink: #F6EFE4;
  --panel-ink-2: #CBBFAE;
  --panel-line: rgba(255, 240, 220, .1);
  --ember: #EE9066;
  --ember-2: #E27A4C;
  --ember-ink: #1F0E05;

  /* type pairing: Inter Tight (variable grotesk, display 800 + text 400-600) with Instrument Serif italic for accents */
  --font-body: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --w-display: 800;

  --t-xs: .8125rem;
  --t-small: .9375rem;
  --t-body: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);
  --t-lede: clamp(1.125rem, 1.04rem + .45vw, 1.375rem);
  --t-h3: clamp(1.25rem, 1.16rem + .4vw, 1.5rem);
  --t-h2: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --t-h1: clamp(2.5rem, 1.35rem + 5vw, 5.75rem);
  --t-mega: clamp(4.25rem, 2.2rem + 9vw, 9.5rem);

  /* 8pt rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px;
  --wrap: 1200px;

  /* shape + layered depth */
  --r-1: 8px; --r-2: 16px; --r-3: 24px; --r-4: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 1px rgba(40,25,10,.04), 0 2px 4px rgba(40,25,10,.05), 0 8px 16px rgba(40,25,10,.05);
  --shadow-2: 0 1px 2px rgba(40,25,10,.05), 0 4px 8px rgba(40,25,10,.06), 0 16px 32px rgba(40,25,10,.08), 0 32px 64px rgba(40,25,10,.08);
  --shadow-paper: 0 1px 1px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.18), 0 24px 48px rgba(0,0,0,.32);
  --hairline: inset 0 0 0 1px rgba(0,0,0,.06);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 160ms; --dur-2: 420ms; --dur-3: 900ms;
  --tap: 44px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* soft spring: ~6% overshoot, settles quietly */
    --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --bg: #0F0C09; --surface: #1A1612; --surface-2: #211C16; --ink: #F5EEE3; --ink-2: #C9BEAD;
    --line: #342C23; --accent: #EE9066; --accent-ink: #1F0E05; --accent-soft: #3A2417; --focus: #F5EEE3; --ok: #7CC38F;
    --panel: #17130F; --panel-2: #1F1914; --panel-3: #29221A;
    --shadow-1: 0 1px 1px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.25);
    --shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.35), 0 32px 64px rgba(0,0,0,.35);
    --hairline: inset 0 0 0 1px rgba(255,255,255,.07); }
}
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #0F0C09; --surface: #1A1612; --surface-2: #211C16; --ink: #F5EEE3; --ink-2: #C9BEAD;
  --line: #342C23; --accent: #EE9066; --accent-ink: #1F0E05; --accent-soft: #3A2417; --focus: #F5EEE3; --ok: #7CC38F;
  --panel: #17130F; --panel-2: #1F1914; --panel-3: #29221A;
  --shadow-1: 0 1px 1px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.25);
  --shadow-2: 0 1px 2px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.35), 0 32px 64px rgba(0,0,0,.35);
  --hairline: inset 0 0 0 1px rgba(255,255,255,.07); }