/* Design tokens transcribed from DESIGN-meta.md — do not hardcode raw values elsewhere, reference these variables. */

:root {
  /* Brand & accent */
  --color-primary: #0064e0;
  --color-primary-deep: #0457cb;
  --color-primary-soft: #0091ff;
  --color-on-primary: #ffffff;
  --color-ink-button: #000000;
  --color-on-ink-button: #ffffff;
  --color-fb-blue: #1876f2;
  --color-meta-link: #385898;
  --color-oculus-purple: #a121ce;

  /* Semantic */
  --color-success: #31a24c;
  --color-success-bg: #24e400;
  --color-attention: #f2a918;
  --color-warning: #f7b928;
  --color-warning-bg: #ffe200;
  --color-critical: #e41e3f;
  --color-critical-strong: #f0284a;

  /* Surface */
  --color-canvas: #ffffff;
  --color-surface-soft: #f1f4f7;
  --color-hairline: #ced0d4;
  --color-hairline-soft: #dee3e9;

  /* Text */
  --color-ink-deep: #0a1317;
  --color-ink: #1c1e21;
  --color-charcoal: #444950;
  --color-slate: #4b4c4f;
  --color-steel: #5d6c7b;
  --color-stone: #8595a4;
  --color-disabled-text: #bcc0c4;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-xxxl: 32px;
  --radius-feature: 40px;
  --radius-full: 100px;
  --radius-circle: 9999px;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 10px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 80px;
  --space-hero: 120px;

  /* Font family — Optimistic VF is Meta's proprietary face, not licensed for this
     project. Fallback chain per DESIGN-meta.md guidance (Montserrat, Helvetica, Arial). */
  --font-display: "Montserrat", "Noto Sans Thai", "Noto Sans", Helvetica, Arial, sans-serif;

  /* Elevation */
  --shadow-tab-indicator: rgba(0, 0, 0, 0.2) 1px 1px 0px 0px;
  --shadow-sticky-panel: rgba(20, 22, 26, 0.3) 0px 1px 4px 0px;
}

/* Typography scale — use as utility classes: <h1 class="text-hero-display"> */
.text-hero-display  { font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.16; }
.text-display-lg    { font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.17; }
.text-heading-lg     { font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1.28; }
.text-heading-md     { font-family: var(--font-display); font-size: 28px; font-weight: 300; line-height: 1.21; }
.text-heading-sm     { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.25; }
.text-subtitle-lg    { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.44; }
.text-subtitle-md    { font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.44; }
.text-body-md-bold   { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.50; letter-spacing: -0.16px; }
.text-body-md        { font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.50; letter-spacing: -0.16px; }
.text-body-sm-bold    { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; }
.text-body-sm        { font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.14px; }
.text-caption-bold   { font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1.33; }
.text-caption        { font-family: var(--font-display); font-size: 12px; font-weight: 400; line-height: 1.33; }
.text-button-md      { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; }
.text-link-md        { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.50; letter-spacing: -0.16px; }