/* TapToWrap design tokens. Mirrored into theme.json for the block editor.
   Colour is OKLCH, full-palette strategy: paper base, ultramarine load-bearing,
   citron used exactly once, persimmon as punctuation. */

:root {
  /* Surface and ink */
  --ttw-paper: oklch(96.2% 0.018 88);
  --ttw-paper-deep: oklch(92.6% 0.026 86);
  --ttw-paper-mat: oklch(89.5% 0.03 84);
  --ttw-ink: oklch(21% 0.021 58);
  --ttw-ink-soft: oklch(43% 0.017 62);
  --ttw-ink-faint: oklch(58% 0.015 65);
  --ttw-rule: oklch(84% 0.022 85);
  --ttw-rule-strong: oklch(72% 0.026 82);

  /* Brand roles */
  --ttw-ribbon: oklch(43% 0.175 262);
  --ttw-ribbon-lift: oklch(51% 0.19 262);
  --ttw-ribbon-deep: oklch(33% 0.13 264);
  --ttw-citron: oklch(88% 0.155 108);
  --ttw-citron-deep: oklch(72% 0.15 112);
  --ttw-persimmon: oklch(63% 0.185 40);
  --ttw-persimmon-lift: oklch(69% 0.18 42);
  /* Deep cut used wherever paper-white type sits on the accent, so 11px labels
     clear 4.5:1 instead of 3.5:1. */
  --ttw-persimmon-deep: oklch(51% 0.17 37);
  --ttw-blush: oklch(86% 0.062 42);

  /* Type families */
  --ttw-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ttw-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Type scale, fluid, ratio >= 1.25 */
  --ttw-fs-micro: 0.6875rem;
  --ttw-fs-label: 0.8125rem;
  --ttw-fs-small: 0.9375rem;
  --ttw-fs-body: 1.0625rem;
  --ttw-fs-lead: clamp(1.25rem, 0.95rem + 0.9vw, 1.5rem);
  --ttw-fs-h4: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
  --ttw-fs-h3: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  --ttw-fs-h2: clamp(2.25rem, 1.35rem + 3.4vw, 3.5rem);
  --ttw-fs-h1: clamp(2.9rem, 1.1rem + 7vw, 6.25rem);
  --ttw-fs-mega: clamp(3.25rem, 0.5rem + 16.5vw, 16rem);
  --ttw-fs-numeral: clamp(3rem, 1.4rem + 5.5vw, 6rem);

  /* Rhythm */
  --ttw-shell: min(100% - 2.5rem, 82.5rem);
  --ttw-shell-wide: min(100% - 1.75rem, 96rem);
  --ttw-shell-narrow: min(100% - 2.5rem, 46rem);
  --ttw-offset: clamp(1.25rem, 7vw, 7rem);
  --ttw-space-1: 0.375rem;
  --ttw-space-2: 0.625rem;
  --ttw-space-3: 1rem;
  --ttw-space-4: 1.5rem;
  --ttw-space-5: 2.25rem;
  --ttw-space-6: 3.5rem;
  --ttw-space-7: clamp(3rem, 6vw, 5.5rem);
  --ttw-space-8: clamp(4rem, 9vw, 8.5rem);
  --ttw-measure: 68ch;

  /* Motion */
  --ttw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ttw-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ttw-fast: 140ms;
  --ttw-mid: 320ms;
  --ttw-slow: 720ms;

  /* Elevation is used sparingly: paper sits on paper, so shadows stay warm and tight */
  --ttw-lift: 0 1px 0 oklch(72% 0.026 82), 0 18px 34px -28px oklch(21% 0.021 58 / 0.45);
  --ttw-lift-high: 0 26px 60px -34px oklch(21% 0.021 58 / 0.55);
}

/* Sections opt into a palette by setting these three, so components stay palette agnostic. */
.ttw-tone {
  background: var(--tone-bg, var(--ttw-paper));
  color: var(--tone-fg, var(--ttw-ink));
}

.ttw-tone--paper { --tone-bg: var(--ttw-paper); --tone-fg: var(--ttw-ink); --tone-quiet: var(--ttw-ink-soft); --tone-rule: var(--ttw-rule); }
.ttw-tone--deep { --tone-bg: var(--ttw-paper-deep); --tone-fg: var(--ttw-ink); --tone-quiet: var(--ttw-ink-soft); --tone-rule: var(--ttw-rule-strong); }
.ttw-tone--citron { --tone-bg: var(--ttw-citron); --tone-fg: oklch(24% 0.06 110); --tone-quiet: oklch(38% 0.07 110); --tone-rule: oklch(74% 0.14 110); }
.ttw-tone--blush { --tone-bg: var(--ttw-blush); --tone-fg: oklch(26% 0.05 40); --tone-quiet: oklch(40% 0.055 40); --tone-rule: oklch(74% 0.07 40); }
.ttw-tone--ribbon {
  --tone-bg: var(--ttw-ribbon);
  --tone-fg: oklch(97% 0.012 250);
  --tone-quiet: oklch(84% 0.045 255);
  --tone-rule: oklch(56% 0.14 262);
  line-height: 1.62;
}