/* ==========================================================================
   MESH Design Language (MDL) 1.0 — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the SEMANTIC design tokens shared across the
   MESH web surfaces (public website, and — as adopted — admin). It is loaded
   first (via @import at the top of styles.css), then styles.css and
   mesh-components.css consume these variables.

   Principles:
   - Foundation before features. One MESH, one design language.
   - NO new colors are invented here. Every value below is the value already
     used somewhere in styles.css today; this file just gives it a name.
   - The BASE palette + theme variants (--mesh-bg / --mesh-gold / --mesh-card
     / --mesh-radius-* / --mesh-shadow-* / etc.) continue to live in
     styles.css :root and its [data-theme=...] blocks so theme switching is
     unchanged. This file ALIASES those into MDL-semantic names and ADDS the
     semantic tokens that were previously scattered as literals (status, plan,
     spacing scale, type scale, component dimensions).
   ========================================================================== */

:root {
  /* ---- Brand / surface (alias existing base palette so theming flows) ---- */
  --mdl-color-brand: var(--mesh-gold, #f8c84e);
  --mdl-color-brand-soft: var(--mesh-gold-soft, #ffe27a);
  --mdl-color-brand-deep: var(--mesh-gold-deep, #b98516);
  --mdl-color-bg: var(--mesh-bg, #030712);
  --mdl-color-surface: var(--mesh-card, rgba(16, 29, 49, 0.72));
  --mdl-color-surface-strong: var(--mesh-card-strong, rgba(23, 38, 62, 0.9));
  --mdl-color-panel: var(--mesh-panel, rgba(12, 22, 38, 0.82));
  --mdl-color-text: var(--mesh-text, #f8fafc);
  --mdl-color-muted: var(--mesh-muted, #aab6c8);
  --mdl-color-border: var(--mesh-border, rgba(248, 200, 78, 0.22));
  --mdl-color-border-soft: var(--mesh-border-soft, rgba(255, 255, 255, 0.1));

  /* ---- Status palette (semantic; values already used across styles.css) -- */
  --mdl-success: #22c55e;
  --mdl-success-soft: #86efac;
  --mdl-success-bg: rgba(34, 197, 94, 0.14);
  --mdl-success-border: rgba(34, 197, 94, 0.42);

  --mdl-warning: #f97316;
  --mdl-warning-soft: #fed7aa;
  --mdl-warning-bg: rgba(124, 45, 18, 0.25);
  --mdl-warning-border: rgba(249, 115, 22, 0.45);

  --mdl-error: #ef4444;
  --mdl-error-soft: #fecaca;
  --mdl-error-bg: rgba(127, 29, 29, 0.35);
  --mdl-error-border: rgba(239, 68, 68, 0.5);

  --mdl-info: #38bdf8;
  --mdl-info-soft: #7dd3fc;
  --mdl-info-bg: rgba(56, 189, 248, 0.12);
  --mdl-info-border: rgba(56, 189, 248, 0.4);

  /* ---- Plan accents (identity-first: every plan reads consistently) ------ */
  --mdl-plan-free: #0055FF;
  --mdl-plan-free-rgb: 0, 85, 255;
  --mdl-plan-plus: #00007F;
  --mdl-plan-plus-rgb: 0, 0, 127;
  --mdl-plan-pro: #5500FF;
  --mdl-plan-pro-rgb: 85, 0, 255;
  --mdl-plan-custom: #FFAA00;
  --mdl-plan-custom-rgb: 255, 170, 0;

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --mdl-space-1: 4px;
  --mdl-space-2: 8px;
  --mdl-space-3: 12px;
  --mdl-space-4: 16px;
  --mdl-space-5: 24px;
  --mdl-space-6: 32px;
  --mdl-space-section: var(--mesh-space, 48px);

  /* ---- Radius (aliases existing + adds component-scale steps) ------------ */
  --mdl-radius-xs: 6px;
  --mdl-radius-sm: var(--mesh-radius-sm, 8px);
  --mdl-radius-md: var(--mesh-radius-md, 14px);
  --mdl-radius-lg: var(--mesh-radius-lg, 22px);
  --mdl-radius-xl: var(--mesh-radius-xl, 30px);
  --mdl-radius-pill: 999px;

  /* ---- Shadow (aliases existing scale) ----------------------------------- */
  --mdl-shadow-sm: var(--mesh-shadow-sm, 0 12px 30px rgba(0, 0, 0, 0.28));
  --mdl-shadow-md: var(--mesh-shadow-md, 0 22px 60px rgba(0, 0, 0, 0.38));
  --mdl-shadow-lg: var(--mesh-shadow-lg, 0 34px 90px rgba(0, 0, 0, 0.52));

  /* ---- Typography -------------------------------------------------------- */
  --mdl-font-family: 'Kantumruy Pro', 'Noto Sans Khmer', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mdl-font-size-xs: 12px;
  --mdl-font-size-sm: 13px;
  --mdl-font-size-base: 14px;
  --mdl-font-size-md: 16px;
  --mdl-font-size-lg: 20px;
  --mdl-font-size-xl: 24px;
  --mdl-font-weight-regular: 400;
  --mdl-font-weight-medium: 600;
  --mdl-font-weight-bold: 700;
  --mdl-font-weight-strong: 850;
  --mdl-line-height: 1.5;

  /* ---- Borders ----------------------------------------------------------- */
  --mdl-border-width: 1px;
  --mdl-border: var(--mdl-border-width) solid var(--mdl-color-border-soft);

  /* ---- Component dimensions ---------------------------------------------- */
  --mdl-control-height: 38px;
  --mdl-control-padding-x: 16px;
  --mdl-control-padding-y: 9px;
  --mdl-focus-ring: 0 0 0 3px rgba(248, 200, 78, 0.35);
  --mdl-transition: 160ms ease;

  /* ---- Icon sizing ------------------------------------------------------- */
  --mdl-icon-sm: 16px;
  --mdl-icon-md: 20px;
  --mdl-icon-lg: 24px;
}