/* Coneso CF — design tokens.
 * Phase A.1 deliverable. Loaded *before* bootstrap.css so utility classes
 * elsewhere can reference `var(--…)` regardless of theme.
 *
 * Edit policy:
 *   - Never reference a hex/px literal in component CSS — go through a token.
 *   - Add new tokens here, then document the new utility in UI_COMPONENTS.md.
 *   - Dark-mode overrides go inside `[data-theme="dark"]` only; the light
 *     theme is the `:root` baseline.
 */

:root {
  /* --- Brand ------------------------------------------------------- */
  --brand-primary:        #2563eb;   /* Blue (decision locked in plan) */
  --brand-primary-50:     #eff6ff;
  --brand-primary-100:    #dbeafe;
  --brand-primary-200:    #bfdbfe;
  --brand-primary-300:    #93c5fd;
  --brand-primary-400:    #60a5fa;
  --brand-primary-500:    #3b82f6;
  --brand-primary-600:    #2563eb;
  --brand-primary-700:    #1d4ed8;
  --brand-primary-800:    #1e40af;
  --brand-primary-900:    #1e3a8a;
  --brand-accent:         #f59e0b;   /* warm amber for callouts/CTAs */

  /* --- Semantic --------------------------------------------------- */
  --color-success:        #16a34a;
  --color-success-bg:     #dcfce7;
  --color-warning:        #d97706;
  --color-warning-bg:     #fef3c7;
  --color-danger:         #dc2626;
  --color-danger-bg:      #fee2e2;
  --color-info:           #0284c7;
  --color-info-bg:        #e0f2fe;

  /* --- Surface + text -------------------------------------------- */
  --bg-base:              #f8fafc;
  --bg-surface:           #ffffff;
  --bg-raised:            #ffffff;
  --bg-overlay:           rgba(15, 23, 42, 0.55);

  --text-primary:         #0f172a;
  --text-secondary:       #334155;
  --text-muted:           #64748b;
  --text-inverse:         #f8fafc;
  --text-link:            var(--brand-primary-600);
  --text-link-hover:      var(--brand-primary-700);

  --border-subtle:        #e2e8f0;
  --border-default:       #cbd5e1;
  --border-strong:        #94a3b8;
  --border-focus:         var(--brand-primary-500);

  /* --- Layout / spacing ------------------------------------------ */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            14px;
  --radius-pill:          999px;

  --shadow-sm:            0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:            0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:            0 12px 32px rgba(15, 23, 42, 0.12);

  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              24px;
  --space-6:              32px;
  --space-7:              48px;
  --space-8:              64px;

  /* --- Type ------------------------------------------------------ */
  --font-lao:             "Noto Serif Lao", "Phetsarath OT", serif;
  --font-thai:            "Noto Sans Thai", "Sarabun", "Tahoma", sans-serif;
  --font-en:              "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:            ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:                12px;
  --fs-sm:                14px;
  --fs-base:              16px;
  --fs-md:                17px;
  --fs-lg:                20px;
  --fs-xl:                24px;
  --fs-2xl:               30px;
  --fs-3xl:               38px;

  --lh-tight:             1.2;
  --lh-normal:            1.5;
  --lh-relaxed:           1.7;

  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  /* --- Z-index --------------------------------------------------- */
  --z-base:               1;
  --z-dropdown:           1000;
  --z-sticky:             1020;
  --z-modal:              1050;
  --z-toast:              1080;
}

[data-theme="dark"] {
  /* Surfaces darken; brand stays loud. */
  --bg-base:              #0b1220;
  --bg-surface:           #131b2c;
  --bg-raised:            #1c263c;
  --bg-overlay:           rgba(0, 0, 0, 0.65);

  --text-primary:         #e6edf7;
  --text-secondary:       #c5cee0;
  --text-muted:           #8b96ad;
  --text-inverse:         #0b1220;
  --text-link:            var(--brand-primary-300);
  --text-link-hover:      var(--brand-primary-200);

  --border-subtle:        #1f2a40;
  --border-default:       #2c3a55;
  --border-strong:        #45577a;

  --color-success-bg:     rgba(22, 163, 74, 0.18);
  --color-warning-bg:     rgba(217, 119, 6, 0.18);
  --color-danger-bg:      rgba(220, 38, 38, 0.18);
  --color-info-bg:        rgba(2, 132, 199, 0.18);

  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.65);
}

/* Language-aware default body font. Pages set `lang="lo"` / `lang="th"` /
 * `lang="en"` on <html> via the base template; the body falls back to the
 * Lao stack to preserve the legacy `.lao-font` look. */
html {
  font-size: var(--fs-base);
  color-scheme: light dark;
}

body {
  font-family: var(--font-en);
  color: var(--text-primary);
  background-color: var(--bg-base);
}

body[lang="lo"], body[lang="la"], html[lang="lo"] body, html[lang="la"] body {
  font-family: var(--font-lao);
}

body[lang="th"], html[lang="th"] body {
  font-family: var(--font-thai);
}

/* Re-point the legacy `.lao-font` helper onto the Lao stack token instead
 * of the previous Google-CDN-only string. Keeps every existing template
 * working while routing through tokens. */
.lao-font {
  font-family: var(--font-lao);
}