/* MMBS Clean Slate tokens. Static-site equivalent of src/lib/styles/tokens.css. */
:root {
  /* 8px spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 96px;
  --s-11: 120px;

  /* Typography */
  --font-display: "Geist", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "Fira Code", Consolas, "SFMono-Regular", monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: clamp(32px, 3.4vw, 44px);
  --text-6xl: clamp(40px, 4.6vw, 56px);
  --text-hero: clamp(44px, 6vw, 72px);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* Neutral system */
  --gray-50: #f8faf9;
  --gray-100: #f5f7f6;
  --gray-200: #e8ecea;
  --gray-300: #d9dfdc;
  --gray-400: #aab4af;
  --gray-500: #7b8791;
  --gray-600: #5f6b7a;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #0b0f14;

  /* Brand accent, sampled from the MMBS logo asset. */
  --brand-50: #eff7ff;
  --brand-100: #dbeeff;
  --brand-200: #b8ddff;
  --brand-500: #0078f0;
  --brand-600: #005ed0;
  --brand-700: #0046a3;
  --brand-900: #001050;

  /* Semantic color */
  --color-bg-base: #f8fafc;
  --color-bg-subtle: #ffffff;
  --color-bg-muted: #ffffff;
  --color-bg-overlay: rgba(255, 255, 255, 0.92);
  --color-overlay-scrim: rgba(15, 23, 42, 0.22);

  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-text-brand: #005ed0;
  --color-text-inverse: #ffffff;

  --color-border-subtle: #e2e8f0;
  --color-border-default: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-brand: #0078f0;

  --color-brand: #0078f0;
  --color-brand-hover: #005ed0;
  --color-brand-subtle: #dbeeff;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-secondary: #ffffff;
  --surface-soft: var(--surface-secondary);
  --surface-muted: #f8fafc;
  --surface-hover: var(--surface-secondary);
  --border: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --accent: #0078f0;
  --accent-soft: rgba(0, 120, 240, 0.10);
  --accent-border: rgba(0, 120, 240, 0.14);
  --major-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --button-primary-bg: #0f172a;
  --button-primary-fg: #ffffff;
  --button-primary-hover: #1e293b;
  --button-secondary-bg: transparent;
  --hero-bg: var(--bg);
  --nav-bg: var(--color-bg-overlay);
  --nav-border: var(--border);
  --dropdown-bg: var(--surface);
  --surface-border: var(--border);
  --hover-accent-border: rgba(0, 120, 240, 0.18);
  --focus-border: rgba(0, 120, 240, 0.40);

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 24px;
  --radius-2xl: 24px;
  --radius-3xl: 24px;
  --radius-button: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06), 0 10px 10px rgba(0, 0, 0, 0.03);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.08);
  --shadow-card: none;
  --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.06);
  --shadow-navbar: 0 1px 0 var(--color-border-subtle);
  --shadow-modal: var(--shadow-2xl);
  --shadow-premium: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.07);
  --shadow-soft: 0 6px 24px rgba(15, 23, 42, 0.06);
  --shadow-medium: 0 10px 40px rgba(15, 23, 42, 0.08);

  /* Motion */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 0.08s;
  --duration-fast: 0.18s;
  --duration-normal: 0.28s;
  --duration-slow: 0.42s;
  --duration-enter: 0.6s;

  /* Containers */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-prose: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Structural layout governance */
  --content-max-width: 1280px;
  --reading-width: 640px;
  --layout-pad: 24px;
  --section-spacing: 96px;
  --section-spacing-tight: 64px;
  --grid-gap-fluid: 32px;
  --nav-height: 72px;
  --nav-system-height: var(--nav-height);
  --nav-radius: 18px;
  --nav-gap: 20px;
  --dropdown-radius: 24px;
  --hero-min-height: min(820px, 100svh);
  --hero-copy-width: 620px;
  --card-gap: 14px;
  --utility-card-min-height: 220px;
  --footer-spacing: 64px;
  --dropdown-width: 1040px;
  --dropdown-width-product: 1080px;
  --dropdown-width-utility: 860px;
  --dropdown-width-resource: 940px;
  --dropdown-viewport-gutter: var(--s-7);
  --dropdown-pad: var(--s-5);
  --dropdown-gap: var(--s-4);
  --dropdown-card-min: 240px;
  --dropdown-feature-min: 300px;
  --dropdown-intro-min: 240px;
  --dropdown-icon-size: 38px;
  --footer-top-space: 72px;
  --footer-bottom-space: 32px;
  --footer-grid-gap: 48px;
  --footer-bottom-gap: 56px;
  --footer-bg: var(--bg);
  --footer-control-bg: var(--surface);
  --system-container: min(var(--content-max-width), calc(100% - var(--s-7)));
  --system-container-mobile: min(100%, calc(100% - var(--s-6)));
  --system-readable: var(--reading-width);
  --system-section-y: var(--section-spacing);
  --system-section-y-mobile: var(--section-spacing-tight);
  --system-card-pad: var(--s-6);
  --system-card-pad-mobile: var(--s-5);
  --system-grid-gap: var(--grid-gap-fluid);

  /* Legacy compatibility aliases, all mapped to the approved token scale. */
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-4);
  --space-5: var(--s-5);
  --space-6: var(--s-6);
  --space-7: var(--s-7);
  --space-8: var(--s-8);
  --space-9: var(--s-9);
  --space-10: var(--s-10);
  --space-11: var(--s-11);
  --font-sans: var(--font-body);
  --weight-regular: var(--weight-normal);
  --color-text-disabled: var(--color-text-tertiary);
  --color-brand-primary: var(--gray-700);
  --color-brand-accent: var(--color-brand);
  --color-brand-line: var(--color-border-brand);
  --radius-full: var(--radius-pill);
  --ease-out-expo: var(--ease-premium);
}

html[data-theme="light"] body,
html[data-theme="light"] {
  --color-bg-base: #f8fafc;
  --color-bg-subtle: #ffffff;
  --color-bg-muted: #ffffff;
  --color-bg-overlay: rgba(255, 255, 255, 0.92);
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-border-subtle: #e2e8f0;
  --color-border-default: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-secondary: #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f8fafc;
  --border: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --footer-bg: #ffffff;
}

html[data-theme="dark"] body,
html[data-theme="dark"] {
  --color-bg-base: #050816;
  --color-bg-subtle: #0b1020;
  --color-bg-muted: #111827;
  --color-bg-overlay: rgba(5, 8, 22, 0.88);
  --color-overlay-scrim: rgba(0, 0, 0, 0.38);
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-brand: #67c8ff;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-brand: #38bdf8;
  --color-brand-hover: #67c8ff;
  --color-brand-subtle: rgba(56, 189, 248, 0.15);
  --color-border-brand: rgba(56, 189, 248, 0.2);
  --bg: #050816;
  --surface: #0b1020;
  --surface-secondary: #111827;
  --surface-soft: var(--surface-secondary);
  --surface-muted: #111827;
  --surface-hover: #182235;
  --border: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.15);
  --accent-border: rgba(56, 189, 248, 0.2);
  --major-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.16);
  --shadow-medium: 0 10px 40px rgba(0, 0, 0, 0.18);
  --button-primary-bg: #f3f4f6;
  --button-primary-fg: #111827;
  --button-primary-hover: #e5e7eb;
  --button-secondary-bg: #111827;
  --hero-bg:
    radial-gradient(
      circle at top,
      rgba(56, 189, 248, 0.08),
      transparent 42%
    ),
    var(--bg);
  --nav-bg: rgba(5, 8, 22, 0.88);
  --nav-border: rgba(255, 255, 255, 0.08);
  --dropdown-bg: #0f172a;
  --surface-border: rgba(255, 255, 255, 0.08);
  --hover-accent-border: rgba(56, 189, 248, 0.24);
  --focus-border: rgba(56, 189, 248, 0.44);
  --shadow-card: none;
  --shadow-card-hover: var(--major-shadow);
  --shadow-premium: var(--major-shadow);
  --shadow-modal: var(--major-shadow);
  --dropdown-shadow: var(--major-shadow);
  --footer-bg: var(--bg);
  --footer-control-bg: var(--surface);
}