/* THE OPEN — tokens.css
   Single source for colour, type, space, grid and motion.
   WordPress: this file maps 1:1 to the theme's design tokens. */

@font-face {
  font-family: "TO Sacred Serif";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-vf.ttf") format("truetype");
}

:root {
  /* ---------- Core palette ---------- */
  --void: #050404;          /* near-black, dominant field */
  --void-2: #0b0808;
  --void-3: #151010;
  --ash: #514c45;           /* secondary UI on BONE */
  --stone: #9a9288;         /* metadata on VOID */
  --bone: #f7f3ee;          /* white text, not a background mass */
  --bone-2: #eee4dc;
  --bone-3: #d8c9bd;
  --life: #c51622;          /* red is the single active accent */
  --life-ink: #ff3545;
  --signal: #c51622;        /* primary red accent */
  --signal-on-dark: #ff2a3a;/* red text on VOID */
  --night: #070706;
  --night-fg: #cfc8be;

  /* ---------- Semantic (default = VOID environment) ---------- */
  --bg: var(--void);
  --bg-2: var(--void-2);
  --fg: var(--bone);
  --fg-2: rgba(237, 231, 224, 0.72);
  --fg-3: var(--stone);
  --line: rgba(237, 231, 224, 0.16);
  --line-strong: rgba(237, 231, 224, 0.42);
  --focus: var(--bone);
  --field-bg: rgba(237, 231, 224, 0.035);
  --scrim: rgba(8, 7, 6, 0.86);

  /* ---------- Type ---------- */
  --font-display: "TO Sacred Serif", "TO Serif", "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "TO Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-mega: clamp(3rem, 1.7rem + 4.8vw, 7.25rem);
  --fs-display: clamp(2.5rem, 1.35rem + 4vw, 5.75rem);
  --fs-h1: clamp(2.125rem, 1.25rem + 3vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.1vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.3125rem, 1.1rem + 0.85vw, 1.875rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-meta: 0.75rem;

  --lh-display: 1.08;       /* Vietnamese stacked diacritics need air above caps */
  --lh-heading: 1.18;
  --lh-read: 1.55;
  --lh-body: 1.6;

  --track-meta: 0.16em;
  --track-wordmark: 0.3em;
  --track-caps: 0em;

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px; --s-40: 160px; --s-48: 192px; --s-64: 256px;

  /* ---------- Grid ---------- */
  --cols: 12;
  --gutter: 24px;
  --margin: 48px;
  --max: 1600px;
  --header-h: 88px;
  --bar-h: 0px;             /* mobile bottom bar height; set in responsive.css */
  --touch: 48px;

  /* ---------- Motion (quiet) ---------- */
  --dur-hover: 200ms;
  --dur-menu: 300ms;
  --dur-page: 450ms;
  --dur-reveal: 600ms;
  --dur-decision: 600ms;
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layers ---------- */
  --z-header: 50;
  --z-bar: 60;
  --z-menu: 100;
  --z-toast: 120;
  --z-intro: 300;
}

/* ---------- Environments ---------- */
[data-theme="bone"],
.tone-light {
  --bg: var(--bone);
  --bg-2: var(--bone-2);
  --fg: var(--void);
  --fg-2: #3a3835;
  --fg-3: var(--ash);
  --line: rgba(11, 11, 10, 0.16);
  --line-strong: rgba(11, 11, 10, 0.5);
  --focus: var(--void);
  --field-bg: rgba(11, 11, 10, 0.03);
  --scrim: rgba(237, 231, 224, 0.9);
}

[data-theme="night"] {
  --bg: var(--night);
  --bg-2: #0d0c0b;
  --fg: var(--night-fg);
  --fg-2: #a39c92;
  --fg-3: #7f7970;
  --line: rgba(207, 200, 190, 0.12);
  --line-strong: rgba(207, 200, 190, 0.32);
  --focus: var(--night-fg);
}

.tone-dark {
  --bg: var(--void);
  --bg-2: var(--void-2);
  --fg: var(--bone);
  --fg-2: rgba(237, 231, 224, 0.72);
  --fg-3: var(--stone);
  --line: rgba(237, 231, 224, 0.16);
  --line-strong: rgba(237, 231, 224, 0.42);
  --focus: var(--bone);
  --field-bg: rgba(237, 231, 224, 0.035);
  --scrim: rgba(11, 11, 10, 0.86);
}

/* ---------- Grid per breakpoint (desktop 12 / tablet 8 / mobile 4) ---------- */
@media (max-width: 1023px) {
  :root {
    --cols: 8;
    --gutter: 20px;
    --margin: 32px;
    --header-h: 72px;
  }
}

@media (max-width: 699px) {
  :root {
    --cols: 4;
    --gutter: 16px;
    --margin: 20px;
    --header-h: 64px;
    --bar-h: 64px;
  }
}