/* Hallmark · tokens · genre: modern-minimal · theme: custom (tuned)
 * vibe: "calm, precise, blueprint blue, photo-first"
 * paper oklch(99% 0.004 262) · accent oklch(44% 0.2 265) modern deep blue
 * display + body: Google Sans (owner's choice; single-family discipline)
 * axes: light / geometric-sans / cool
 * Light is the default. Dark applies only when the visitor picks it (data-theme="dark").
 */
:root {
  color-scheme: light;

  --color-paper:        oklch(99% 0.004 262);
  --color-paper-2:      oklch(97% 0.007 262);
  --color-paper-3:      oklch(93.5% 0.012 262);
  --color-ink:          oklch(22% 0.035 264);
  --color-ink-2:        oklch(47% 0.028 262);
  --color-rule:         oklch(90.5% 0.012 262);
  --color-accent:       oklch(44% 0.2 265);
  --color-accent-hover: oklch(38% 0.18 265);
  --color-accent-ink:   oklch(99% 0.004 262);
  --color-accent-soft:  oklch(95% 0.03 265);
  --color-focus:        oklch(55% 0.21 265);
  --color-inverse:      oklch(22% 0.035 264);
  --color-inverse-ink:  oklch(97% 0.007 262);
  --color-inverse-2:    oklch(78% 0.02 262);
  --color-scrim:        oklch(14% 0.02 264 / 0.93);
  --color-on-scrim:     oklch(96% 0.006 262);
  --color-glass:        oklch(99% 0.004 262 / 0.82);

  /* platform colours for contact badges */
  --color-line:         oklch(72% 0.2 148);   /* LINE green */
  --color-facebook:     oklch(58% 0.2 258);   /* Facebook blue */
  --color-phone:        var(--color-accent);
  --color-email:        var(--color-ink-2);
  --color-badge-ink:    oklch(99% 0.004 262);

  --shadow-pill: 0 1px 2px oklch(22% 0.035 264 / 0.06), 0 10px 28px oklch(22% 0.035 264 / 0.08);
  --shadow-card: 0 18px 40px oklch(22% 0.035 264 / 0.12);

  --font-display: var(--font, "Google Sans"), "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --font-body:    var(--font, "Google Sans"), "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;

  --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: 4.5rem;  --space-3xl: 7rem;
  --gutter:    clamp(1rem, 4vw, 1.5rem);

  --text-xs:  0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem;
  --text-lg:  1.1875rem; --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem);
  --text-display: clamp(2.25rem, 1.45rem + 3vw, 3.75rem);
  --text-title: clamp(2rem, 1.4rem + 2.2vw, 3.125rem);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-med:   320ms;
  --dur-long:  600ms;

  --radius-card:  16px;
  --radius-media: 10px;
  --radius-pill:  999px;

  --wrap: 1200px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:        oklch(17% 0.02 264);
  --color-paper-2:      oklch(20% 0.022 264);
  --color-paper-3:      oklch(25% 0.025 264);
  --color-ink:          oklch(95% 0.008 262);
  --color-ink-2:        oklch(74% 0.02 262);
  --color-rule:         oklch(30% 0.025 264);
  --color-accent:       oklch(74% 0.13 265);
  --color-accent-hover: oklch(80% 0.11 265);
  --color-accent-ink:   oklch(17% 0.02 264);
  --color-accent-soft:  oklch(27% 0.06 265);
  --color-focus:        oklch(78% 0.12 265);
  --color-inverse:      oklch(24% 0.03 264);
  --color-inverse-ink:  oklch(96% 0.006 262);
  --color-inverse-2:    oklch(76% 0.02 262);
  --color-glass:        oklch(17% 0.02 264 / 0.8);
  --color-phone:        oklch(52% 0.19 265);
  --shadow-pill: 0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 28px oklch(0% 0 0 / 0.35);
  --shadow-card: 0 18px 40px oklch(0% 0 0 / 0.4);
}