/* Hallmark · theme: custom (tuned) · system: DIY ECOM Academy
 * vibe: "warm classroom paper, magenta ink, three-square mark"
 * paper oklch(97.6% 0.008 80) · accent oklch(53% 0.215 2) magenta (from the old diyecom.co #E7086F)
 * display: IBM Plex Sans Thai 700 · body: Inter (Latin/digits) + Noto Sans Thai (Thai)
 * axes: light / grotesk-sans / warm
 * Edit tokens here only, then run ./sync-shared.sh so every site gets the change.
 */
:root {
  /* paper + ink */
  --color-paper: oklch(97.6% 0.008 80);
  --color-paper-2: oklch(95% 0.013 80);
  --color-paper-3: oklch(91.5% 0.016 80);
  --color-card: oklch(99.3% 0.004 80);
  --color-ink: oklch(23.5% 0.02 262);
  --color-ink-2: oklch(40% 0.018 262);
  --color-ink-3: oklch(52% 0.014 262);
  --color-rule: oklch(87% 0.014 80);
  --color-rule-strong: oklch(78% 0.016 80);

  /* brand */
  --color-accent: oklch(53% 0.215 2);
  --color-accent-hover: oklch(47% 0.2 2);
  --color-accent-soft: oklch(95% 0.03 2);
  --color-accent-ink: oklch(42% 0.17 2);
  --color-wine: oklch(33% 0.12 358);
  --color-on-accent: oklch(99% 0.004 80);

  /* the three squares from the DIY ECOM logo */
  --color-sq-red: oklch(58% 0.22 27);
  --color-sq-amber: oklch(81% 0.16 78);
  --color-sq-blue: oklch(55% 0.2 264);

  /* dark band */
  --color-night: oklch(22% 0.022 262);
  --color-night-2: oklch(28% 0.024 262);
  --color-on-night: oklch(96% 0.008 80);
  --color-on-night-2: oklch(78% 0.012 262);

  /* LINE + states */
  --color-line: oklch(56% 0.16 150);
  --color-line-hover: oklch(50% 0.15 150);
  --color-on-line: oklch(99% 0.004 150);
  --color-ok: oklch(52% 0.13 150);
  --color-ok-soft: oklch(95% 0.04 150);
  --color-warn-soft: oklch(96% 0.04 85);
  --color-warn-ink: oklch(42% 0.1 70);
  --color-error: oklch(52% 0.2 27);
  --color-focus: oklch(55% 0.2 264);

  /* type */
  --font-display: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Thai", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  --text-3xl: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem);
  --text-display: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem);
  --text-stat: clamp(3.4rem, 2rem + 7vw, 7.5rem);

  /* 4pt spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(4rem, 3rem + 4vw, 7rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);

  --shadow-card: 0 1px 0 oklch(23.5% 0.02 262 / 0.04), 0 8px 24px -12px oklch(23.5% 0.02 262 / 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  --wrap: 72rem;
  --wrap-narrow: 42rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}