/* ============================================================
   ThaiHao Design System — Tokens
   colors_and_type.css

   Authority order for any conflict:
   1. DESIGN.md (brand identity — uploaded separately)
   2. 02-design-system-digest.md (distilled tokens)
   3. This file (production CSS form of those tokens)

   Discipline summary:
   D1 — Two weights only: 400 + 500. No bold.
   D2 — Sentence case. label-caps is the only uppercase.
   D3 — No emoji in UI (LanguageFlag is the one exception).
   D4 — Reference tokens only — no hardcoded hex in components.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap");

:root {
  /* ----- 1. Brand primary ----- */
  --thaihao-primary: #AC0022;
  --thaihao-primary-hover: #C81F35;
  --thaihao-primary-pressed: #800017;
  --thaihao-primary-tint: #fdf3f4;
  --thaihao-on-primary: #ffffff;

  /* CTA fill aliases. Named "gradient-" for legacy call sites in kit CSS;
     the values are solid colors — README "Backgrounds" forbids gradients on CTAs.
     Rename to --cta-primary across kit CSS in a future refactor. */
  --gradient-primary: var(--thaihao-primary);
  --gradient-primary-hover: var(--thaihao-primary-hover);

  /* ----- 2. Surface (modern neutral tonal layers) ----- */
  --surface: #f7f8fa;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f2f6;
  --surface-container: #e7e9ef;
  --surface-container-high: #dde0e8;
  --surface-container-highest: #d2d6e0;
  --on-surface: #15181d;
  --on-surface-variant: #686d78;
  --outline: #9ca1ac;
  --outline-variant: #e2e4ea;

  /* ----- 3. Semantic state ----- */
  --color-background-info: #dbeafe;
  --color-background-success: #dcfce7;
  --color-background-warning: #fef3c7;
  --color-background-danger: #ffdad6;
  --color-text-on-info: #1e3a8a;
  --color-text-on-success: #14532d;
  --color-text-on-warning: #78350f;
  --color-text-on-danger: #93000a;
  --color-border-info: #93c5fd;
  --color-border-success: #86efac;
  --color-border-warning: #fde68a;
  --color-border-danger: #fda4af;

  /* ----- 4. Trust pill tints (D6) ----- */
  --trust-estimated-bg: var(--color-background-warning);
  --trust-estimated-fg: var(--color-text-on-warning);
  --trust-provisional-bg: var(--color-background-warning);
  --trust-provisional-fg: var(--color-text-on-warning);
  --trust-locked-bg: var(--color-background-success);
  --trust-locked-fg: var(--color-text-on-success);
  --trust-final-bg: var(--color-background-success);
  --trust-final-fg: var(--color-text-on-success);
  --trust-disputed-bg: var(--color-background-danger);
  --trust-disputed-fg: var(--color-text-on-danger);
  --trust-pending-bg: var(--color-background-info);
  --trust-pending-fg: var(--color-text-on-info);

  /* ----- 5. Type — families ----- */
  --font-display: "IBM Plex Sans", "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif;
  --font-sans: "Inter", "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ----- 6. Type — weights (D1: only these two) ----- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* ----- 7. Type — scale ----- */
  --type-display-lg-size: 40px;
  --type-display-lg-line: 48px;
  --type-display-lg-track: -0.02em;

  --type-headline-md-size: 24px;
  --type-headline-md-line: 32px;

  --type-title-sm-size: 18px;
  --type-title-sm-line: 24px;

  --type-body-md-size: 14px;
  --type-body-md-line: 20px;

  --type-body-sm-size: 13px;
  --type-body-sm-line: 18px;

  --type-label-caps-size: 11px;
  --type-label-caps-line: 16px;
  --type-label-caps-track: 0.05em;

  --type-data-mono-size: 13px;
  --type-data-mono-line: 16px;

  /* ----- 8. Spacing (4px base) ----- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* stack and gutter aliases */
  --stack-tight: var(--space-2);
  --stack-default: var(--space-4);
  --stack-loose: var(--space-6);
  --page-margin-desktop: var(--space-8);
  --page-margin-mobile: var(--space-4);
  --gutter: var(--space-6);
  --container-max: 1440px;

  /* ----- 9. Borders ----- */
  --border-thin: 0.5px;
  --border-default: 1px;
  --border-thick: 2px;
  --border-color-default: var(--outline-variant);
  --border-color-strong: var(--outline);
  --border-color-intent: var(--thaihao-primary);

  /* ----- 10. Radii ----- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ----- 11. Elevation (tonal preferred; shadows only for floating) ----- */
  --shadow-none: none;
  --shadow-floating: 0 10px 15px -3px rgba(0, 0, 0, 0.05),
    0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.10);

  /* ----- 12. Motion ----- */
  --motion-fast: 150ms ease-out;
  --motion-default: 200ms ease-out;
  --motion-slow: 250ms ease-out;

  /* Easing aliases used by kit CSS for transform springs */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- 13. Focus ring (D9) ----- */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--thaihao-primary);

  /* ----- 14. Per-surface density hints ----- */
  --density-row-medium: 44px;
  --density-row-high: 36px;
  --density-row-comfortable: 56px;
}

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

/* ============================================================
   Dark theme — Corporate Modern Enterprise, after-hours.
   Activated by `data-theme="dark"` on <html> (or any ancestor).
   Token-only swap — components reference vars, never hex.
   ============================================================ */

[data-theme="dark"] {
  /* Primary stays — brand color is brand color. Lifts in dark for contrast. */
  --thaihao-primary: #DA2C45;
  --thaihao-primary-hover: #EC4459;
  --thaihao-primary-pressed: #B81829;
  --thaihao-primary-tint: #2A0E14;
  --thaihao-on-primary: #ffffff;

  /* Surface — deep desaturated navy, tonal ladder warms slightly upward */
  --surface: #0B0D12;
  --surface-container-lowest: #14171E;
  --surface-container-low: #1A1E27;
  --surface-container: #222730;
  --surface-container-high: #2B313C;
  --surface-container-highest: #353C48;
  --on-surface: #E8EAF1;
  --on-surface-variant: #9BA1B0;
  --outline: #4A505E;
  --outline-variant: #2D323D;

  /* Semantic — inverted tints, brighter text on darker fills */
  --color-background-info: #14223D;
  --color-background-success: #102A1B;
  --color-background-warning: #2A1F0A;
  --color-background-danger:  #3F1612;
  --color-text-on-info:    #B8CFFF;
  --color-text-on-success: #8CECB1;
  --color-text-on-warning: #FFC97A;
  --color-text-on-danger:  #FF8A82;
  --color-border-info:    #2E4A82;
  --color-border-success: #1F4E32;
  --color-border-warning: #4D3A0E;
  --color-border-danger:  #7A2820;

  /* Trust pill tints follow semantic */
  --trust-estimated-bg: var(--color-background-warning);
  --trust-estimated-fg: var(--color-text-on-warning);
  --trust-provisional-bg: var(--color-background-warning);
  --trust-provisional-fg: var(--color-text-on-warning);
  --trust-locked-bg: var(--color-background-success);
  --trust-locked-fg: var(--color-text-on-success);
  --trust-final-bg: var(--color-background-success);
  --trust-final-fg: var(--color-text-on-success);
  --trust-disputed-bg: var(--color-background-danger);
  --trust-disputed-fg: var(--color-text-on-danger);
  --trust-pending-bg: var(--color-background-info);
  --trust-pending-fg: var(--color-text-on-info);

  /* Elevation — deeper, darker shadows for floating elements */
  --shadow-floating: 0 12px 24px -8px rgba(0, 0, 0, 0.55),
                     0 4px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-modal:    0 28px 56px -12px rgba(0, 0, 0, 0.65);

  /* Focus ring — primary needs the surface ring color to track theme */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--thaihao-primary);

  color-scheme: dark;
}

/* ============================================================
   Semantic role styles — apply these (not raw vars) in markup.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--font-weight-regular);
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-track);
  font-weight: var(--font-weight-medium);
  color: var(--on-surface);
}

.headline-md, h1 {
  font-family: var(--font-display);
  font-size: var(--type-headline-md-size);
  line-height: var(--type-headline-md-line);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  color: var(--on-surface);
  margin: 0;
}

.title-sm, h2, h3 {
  font-family: var(--font-sans);
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-line);
  font-weight: var(--font-weight-medium);
  color: var(--on-surface);
  margin: 0;
}

.body-md, p {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--font-weight-regular);
  color: var(--on-surface);
  margin: 0;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--font-weight-regular);
  color: var(--on-surface-variant);
}

.label-caps {
  font-family: var(--font-sans);
  font-size: var(--type-label-caps-size);
  line-height: var(--type-label-caps-line);
  letter-spacing: var(--type-label-caps-track);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.data-mono {
  font-family: var(--font-mono);
  font-size: var(--type-data-mono-size);
  line-height: var(--type-data-mono-line);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

/* Mobile downscale per digest §2.2 */
@media (max-width: 640px) {
  .display-lg {
    font-size: 28px;
    line-height: 32px;
  }
}

/* ============================================================
   Focus rings — apply to every interactive element.
   ============================================================ */

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}