/* ==========================================================================
   MHTSdigiXR Starter — Design Tokens
   All colours, type, spacing, radii, depth and motion values live here.
   Brand colours are overridden at runtime from the active configuration
   (see js/core/config-service.js → applyTheme()).
   ========================================================================== */

:root {
  /* ---- Brand (approved MHTSdigiXR palette) ---- */
  --brand-primary: #0099D8;
  --brand-primary-2: #19A5E0;
  --brand-secondary: #8B5CF6;
  --brand-teal: #14B8A6;
  --brand-orange: #F59E0B;
  --brand-accent: #14B8A6;

  /* RGB channel versions (used for alpha blends; set at runtime too) */
  --brand-primary-rgb: 0, 153, 216;
  --brand-secondary-rgb: 139, 92, 246;
  --brand-accent-rgb: 20, 184, 166;

  --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .14), rgba(var(--brand-secondary-rgb), .14));
  --gradient-aurora: linear-gradient(120deg, var(--brand-primary), var(--brand-accent) 45%, var(--brand-secondary));

  /* ---- Neutrals (light theme default) ---- */
  --bg: #F5F8FC;
  --bg-elev: #FFFFFF;
  --surface: rgba(255, 255, 255, .72);
  --surface-strong: rgba(255, 255, 255, .9);
  --surface-muted: rgba(15, 23, 42, .04);
  --border: rgba(15, 23, 42, .09);
  --border-strong: rgba(15, 23, 42, .16);
  --text: #0B1324;
  --text-2: #3B4558;
  --text-3: #5D6880;
  --text-inverse: #FFFFFF;
  --focus: #0077B3;

  /* ---- Semantic ---- */
  --success: #0E9F6E;
  --success-bg: rgba(14, 159, 110, .12);
  --warning: #B45309;
  --warning-bg: rgba(245, 158, 11, .16);
  --danger: #DC2626;
  --danger-bg: rgba(220, 38, 38, .11);
  --info: #0284C7;
  --info-bg: rgba(2, 132, 199, .11);
  --purple: #7C3AED;
  --purple-bg: rgba(139, 92, 246, .13);
  --neutral-bg: rgba(15, 23, 42, .07);

  /* ---- Typography ---- */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: .875rem;
  --fs-caption: .8125rem;
  --fs-label: .8125rem;
  --fs-button: .9375rem;
  --fs-nav: .9375rem;
  --fs-dash: .875rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-display: -.035em;
  --ls-heading: -.02em;
  --ls-label: .06em;

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

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --container: 1200px;
  --gutter: clamp(1rem, .5rem + 2vw, 2rem);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Depth (layered soft shadows) ---- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-2: 0 2px 4px rgba(15, 23, 42, .05), 0 10px 24px -6px rgba(15, 23, 42, .12);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, .05), 0 24px 48px -12px rgba(15, 23, 42, .2);
  --shadow-brand: 0 12px 32px -10px rgba(var(--brand-primary-rgb), .55);
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, .7);

  --glass-blur: 18px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---- Layers ---- */
  --z-header: 50;
  --z-demo: 60;
  --z-dropdown: 80;
  --z-modal: 100;
  --z-toast: 120;

  --header-h: 68px;
  --demo-bar-h: 40px;
  --sidebar-w: 256px;

  color-scheme: light;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --bg: #070B16;
  --bg-elev: #0E1526;
  --surface: rgba(18, 27, 47, .66);
  --surface-strong: rgba(20, 30, 52, .92);
  --surface-muted: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --text: #EEF3FB;
  --text-2: #C3CCDC;
  --text-3: #95A1B8;
  --focus: #5CC8F5;

  --success: #34D399;
  --success-bg: rgba(52, 211, 153, .14);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, .14);
  --danger: #F87171;
  --danger-bg: rgba(248, 113, 113, .14);
  --info: #38BDF8;
  --info-bg: rgba(56, 189, 248, .14);
  --purple: #A78BFA;
  --purple-bg: rgba(167, 139, 250, .16);
  --neutral-bg: rgba(255, 255, 255, .08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px -6px rgba(0, 0, 0, .5);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 48px -12px rgba(0, 0, 0, .65);
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, .08);

  color-scheme: dark;
}