/* Friendly style set — measured blueprint.bryanjohnson.com 2026-10-27.
   Load instead of tokens/base/tokens.css when a client wants the warm Blueprint-like system.
   English stack uses Figtree (house default); Thai uses Noto Sans Thai. Set --accent to client brand. */

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

:root {
  color-scheme: light;

  --gray-0: #ffffff;
  --gray-50: #f6f4ec;
  --gray-100: #f1ecde;
  --gray-200: #e1e3e1;
  --gray-300: #c8ccc8;
  --gray-400: #9aa0a8;
  --gray-500: #6e7684;
  --gray-600: #465985;
  --gray-700: #2a3550;
  --gray-800: #1a2438;
  --gray-900: #111c35;
  --gray-950: #0a1020;

  --brand: #111c35;
  --brand-2: #f6f4ec;
  --brand-50: color-mix(in oklch, var(--brand) 6%, white);
  --brand-100: color-mix(in oklch, var(--brand) 10%, white);
  --brand-200: color-mix(in oklch, var(--brand) 18%, white);
  --brand-300: color-mix(in oklch, var(--brand) 30%, white);
  --brand-400: color-mix(in oklch, var(--brand) 50%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklch, var(--brand) 88%, black);
  --brand-700: color-mix(in oklch, var(--brand) 76%, black);
  --brand-800: color-mix(in oklch, var(--brand) 62%, black);
  --brand-900: color-mix(in oklch, var(--brand) 48%, black);
  --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);

  --bg: #f6f4ec;
  --surface: #ffffff;
  --text: #111c35;
  --text-muted: #465985;
  --text-tertiary: #6e7684;
  --border: #e1e3e1;
  --bg-dark: #111c35;
  --bg-dark-alt: #0a1020;
  --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);

  /* Spacing — Blueprint uses 8/12/16/24px rhythms; keep library 4px ladder. */
  --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;

  --layout-max-width: 1200px;
  --layout-gutter: 16px;
  --layout-gutter-desktop: 24px;
  --section-gap-headline-body: 16px;
  --section-gap-body-cta: 24px;
  --grid-gap-product: 24px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-button: 18px;

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

  --text-xs: 0.75rem;
  --leading-xs: 1.333;
  --text-sm: 0.875rem;
  --leading-sm: 1.375;
  --text-base: 1.0625rem;
  --leading-base: 1.7;
  --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: 2.85rem;
  --leading-5xl: 1.15;
  --text-6xl: 3.75rem;
  --leading-6xl: 1.05;
  --leading-thai: 1.7;
  --leading-thai-heading: 1.5;

  --font-sans: Figtree, "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Marketing type scale (mirrors typography/apple-font-weights names). */
  --type-hero-weight: 400;
  --type-hero-size: 45.6px;
  --type-hero-line-height: 1.15;
  --type-hero-letter-spacing: 0;
  --type-hero-font-family: var(--font-display);

  --type-section-weight: 500;
  --type-section-size: 30px;
  --type-section-line-height: 1.2;
  --type-section-letter-spacing: 0;
  --type-section-font-family: var(--font-display);

  --type-tile-headline-weight: 400;
  --type-tile-headline-size: 20px;
  --type-tile-headline-line-height: 1.2;
  --type-tile-headline-letter-spacing: 0;
  --type-tile-headline-font-family: var(--font-display);

  --type-body-weight: 400;
  --type-body-size: 17px;
  --type-body-line-height: 1.7;
  --type-body-letter-spacing: 0;
  --type-body-font-family: var(--font-sans);

  --type-caption-weight: 400;
  --type-caption-size: 14px;
  --type-caption-line-height: 1.375;
  --type-caption-letter-spacing: 0;
  --type-caption-font-family: var(--font-sans);

  --type-nav-bar-weight: 500;
  --type-nav-bar-size: 14px;
  --type-nav-bar-line-height: 1.375;
  --type-nav-bar-letter-spacing: 0.01em;
  --type-nav-bar-font-family: var(--font-sans);

  --ease-standard: ease;
  --ease-out-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  --bp-sm: 560px;
  --bp-md: 834px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

@media (max-width: 833px) {
  :root {
    --type-hero-size: 28px;
    --type-hero-line-height: 1.15;
    --layout-gutter: 16px;
  }
}

@media (min-width: 834px) and (max-width: 1023px) {
  :root {
    --type-hero-size: 28.4px;
    --type-hero-line-height: 1.05;
  }
}

: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;
}

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"],
  .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"]
):focus:not(:focus-visible) {
  outline: none;
}

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