/* Hallmark · tokens · theme: Hum (playful) · Thai font substitution: Mitr + Anuphan
 * axes: paper-band light · display rounded-sans · accent multi (pear 95 / cyan 235 / coral 18)
 */
:root {
  /* paper + ink */
  --color-paper: oklch(97% 0.012 95);
  --color-paper-2: oklch(94% 0.016 95);
  --color-paper-3: oklch(91% 0.020 95);
  --color-card: oklch(99% 0.006 95);
  --color-ink: oklch(20% 0.012 250);
  --color-ink-2: oklch(20% 0.012 250 / 0.72);
  --color-ink-3: oklch(20% 0.012 250 / 0.64);
  --color-line: oklch(20% 0.012 250 / 0.14);
  --color-line-strong: oklch(20% 0.012 250 / 0.28);

  /* accents: each owns its own surface */
  --color-accent: oklch(86% 0.18 95);          /* pear: primary action, character */
  --color-accent-deep: oklch(70% 0.15 82);     /* pear button edge */
  --color-accent-cast: oklch(76% 0.20 95 / 0.45);
  --color-accent-2: oklch(66% 0.18 235);       /* cyan: links, integrations band */
  --color-accent-2-ink: oklch(44% 0.13 235);
  --color-accent-3: oklch(68% 0.24 18);        /* coral: one high-energy moment */
  --color-accent-3-ink: oklch(48% 0.19 22);
  --color-mint: oklch(80% 0.16 150);
  --color-lavender: oklch(74% 0.16 305);
  --color-focus: oklch(52% 0.20 262);

  /* tints (surfaces) */
  --tint-pear: color-mix(in oklab, var(--color-accent) 26%, var(--color-paper));
  --tint-pear-strong: color-mix(in oklab, var(--color-accent) 55%, var(--color-paper));
  --tint-cyan: color-mix(in oklab, var(--color-accent-2) 13%, var(--color-paper));
  --tint-coral: color-mix(in oklab, var(--color-accent-3) 12%, var(--color-paper));
  --tint-mint: color-mix(in oklab, var(--color-mint) 22%, var(--color-paper));
  --tint-lavender: color-mix(in oklab, var(--color-lavender) 18%, var(--color-paper));
  --bubble-user: color-mix(in oklab, var(--color-accent-2) 18%, var(--color-card));

  /* charts (validated: dataviz validate_palette.js, light, on --color-card, all pairs).
     chart-1 is 2.6:1 vs card, so it always ships with visible labels or a table view. */
  --chart-1: oklch(70% 0.15 82);    /* pear-deep  #cc9300 */
  --chart-2: oklch(60% 0.15 235);   /* cyan-deep  #008bcc */
  --chart-3: oklch(62% 0.19 345);   /* magenta    #d14ba0 (lavender failed deutan vs cyan) */
  --chart-grid: oklch(20% 0.012 250 / 0.10);

  /* type */
  --font-display: "Mitr", "Anuphan", system-ui, sans-serif;
  --font-body: "Anuphan", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.6vw + 1.2rem, 2.25rem);
  --text-3xl: clamp(2rem, 2.6vw + 1.2rem, 3.25rem);
  --text-display: clamp(2.375rem, 4.2vw + 1rem, 4.5rem);
  --text-display-s: clamp(2.125rem, 2.6vw + 1.1rem, 3.5rem);

  /* space (4pt) */
  --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: 6rem;
  --space-4xl: 8rem;

  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --section-gap: clamp(4rem, 8vw, 7.5rem);

  /* shape */
  --radius-panel: 28px;   /* big containers: builder, waitlist card */
  --radius-card: 22px;
  --radius-bubble: 18px;
  --radius-input: 12px;
  --radius-pill: 999px;
  --radius-tail: 6px;     /* chat-bubble tail corner */
  --radius-mark: 14px;    /* small decorative shapes */
  --rule: 1.5px dashed var(--color-line-strong);

  --shadow-contact: 0 1px 2px oklch(20% 0.012 250 / 0.08);
  --shadow-ambient: 0 18px 40px -20px oklch(20% 0.012 250 / 0.22);
  --shadow-lift: 0 26px 50px -22px oklch(20% 0.012 250 / 0.28);
  --shadow-knob: 0 2px 4px oklch(20% 0.012 250 / 0.18);   /* switch knob */
  --color-scrim: oklch(20% 0.012 250 / 0.38);             /* dialog / drawer backdrop */

  /* motion */
  --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);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-short: 160ms;
  --dur-med: 280ms;
  --dur-long: 600ms;
}