/* Design tokens — light theme only.
   Default neutrals match apple.com (2026-10-26). Recolor CTAs with --accent; ink scale uses --brand.
   Set --brand-2 only when a second neutral band is needed. Breakpoints are listed for @media only. */

html {
  -webkit-tap-highlight-color: transparent;
}

:root {
  color-scheme: light;

  /* Gray — utility scale (Apple ink lives in semantic --text / --brand). */
  --gray-0: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8ed;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #86868b;
  --gray-600: #6e6e73;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #1d1d1f;
  --gray-950: #161617;

  /* Ink scale (--brand). Client accent is --accent, not Apple's #0071E3. */
  --brand: #1d1d1f;
  --brand-2: #f5f5f7;
  --brand-50: color-mix(in oklch, var(--brand) 8%, white);
  --brand-100: color-mix(in oklch, var(--brand) 14%, white);
  --brand-200: color-mix(in oklch, var(--brand) 28%, white);
  --brand-300: color-mix(in oklch, var(--brand) 46%, white);
  --brand-400: color-mix(in oklch, var(--brand) 70%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklch, var(--brand) 92%, black);
  --brand-700: color-mix(in oklch, var(--brand) 78%, black);
  --brand-800: color-mix(in oklch, var(--brand) 62%, black);
  --brand-900: color-mix(in oklch, var(--brand) 46%, black);
  /* Black on a light brand, white on a dark one. Threshold is oklch lightness. */
  --brand-contrast: oklch(from var(--brand) clamp(0, calc((0.62 - l) * 100), 1) 0 0);
  --accent-contrast: oklch(from var(--accent) clamp(0, calc((0.62 - l) * 100), 1) 0 0);

  /* Semantic roles — Apple neutrals by default */
  --bg: #ffffff;
  --surface: #f5f5f7;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --text-tertiary: #86868b;
  --border: #e8e8ed;
  --bg-dark: #1d1d1f;
  --bg-dark-alt: #161617;
  --accent: #4f46e5;
  --accent-hover: color-mix(in oklch, var(--accent) 78%, black);
  --focus-ring-color: var(--accent);
  --focus-ring-color-alt: var(--gray-0);
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;
  --focus-ring-offset-container: 3px;
  --focus-ring-offset-nav: -7px;
  --focus-ring: var(--focus-ring-color);
  --sk-focus-color: var(--focus-ring-color);
  --sk-focus-color-alt: var(--focus-ring-color-alt);
  --sk-focus-offset: var(--focus-ring-offset);
  --sk-focus-offset-container: var(--focus-ring-offset-container);
  --success: #166534;
  --warning: #854d0e;
  --danger: #b42318;

  /* Spacing — 4px base. --space-11 is 44px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-18: 72px;
  --space-20: 80px;
  --space-28: 112px;
  --space-30: 120px;
  --space-36: 144px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--gray-950) 8%, transparent);
  --shadow-md: 0 8px 24px color-mix(in oklch, var(--gray-950) 10%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in oklch, var(--gray-950) 16%, transparent);

  /* Type. Sizes and their line-heights. Body default is the mixed Thai/Latin measure. */
  --text-xs: 0.75rem;
  --leading-xs: 1.333;
  --text-sm: 0.875rem;
  --leading-sm: 1.43;
  --text-base: 1.0625rem;
  --leading-base: 1.4705882353;
  --text-lg: 1.125rem;
  --leading-lg: 1.55;
  --text-xl: 1.25rem;
  --leading-xl: 1.45;
  --text-2xl: 1.5rem;
  --leading-2xl: 1.35;
  --text-3xl: 1.875rem;
  --leading-3xl: 1.25;
  --text-4xl: 2.25rem;
  --leading-4xl: 1.2;
  --text-5xl: 3rem;
  --leading-5xl: 1.15;
  --text-6xl: 3.75rem;
  --leading-6xl: 1.1;
  --leading-thai: 1.7;
  --leading-thai-heading: 1.5;

  --font-sans: 'Figtree', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Motion. --ease-standard is Apple's global nav. --ease-out-soft is Stripe's. */
  --ease-standard: cubic-bezier(.4, 0, .6, 1);
  --ease-out-soft: cubic-bezier(.25, 1, .5, 1);
  --dur-fast: 120ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Breakpoints — sm 560 / md 834 / lg 1024 / xl 1440. Copy the px into @media. */
  --bp-sm: 560px;
  --bp-md: 834px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

:lang(th) {
  line-height: var(--leading-thai);
  letter-spacing: 0;
}

:is(h1, h2, h3):lang(th) {
  line-height: max(var(--leading-thai-heading), 1.333);
  letter-spacing: 0;
}

:is(:lang(zh), :lang(ja), :lang(ko), :lang(my)) {
  letter-spacing: 0;
}

/* Keyboard-only focus rings on interactive controls (not typing fields). Solid outline, no box-shadow. */
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

:is(
  button,
  summary,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  .button,
  .btn
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset-container);
}

:is(
  a,
  button,
  summary,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"]
):focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}