/* Mulholland — design tokens.
   The single source of truth for colors, type, spacing, motion, and layout.
   Component CSS in styles.css references these via var(--token). */

:root {
  /* ─────────────────────────────────────────── Colors ── */
  --color-midnight-graphite: #1d1d1f;
  --color-cloud-mist: #6b6c6c;
  --color-pure-white: #ffffff;
  --color-frost-gray: #f3f6f6;
  --color-steel-accent: #cccfcf;
  --color-dark-charcoal: #313131;
  --color-slate-echo: #444545;
  --color-alabaster: #e8e8ed;
  --color-pure-black: #000000;
  --color-light-pearl: #dedfe2;
  --color-ocean-blue: #0066cc;
  --color-vivid-blue: #0071e3;

  /* Semantic aliases */
  --color-text: var(--color-midnight-graphite);
  --color-text-muted: var(--color-cloud-mist);
  --color-bg: var(--color-pure-white);
  --color-bg-soft: var(--color-frost-gray);
  --color-bg-dark: var(--color-midnight-graphite);
  --color-border: var(--color-alabaster);
  --color-border-soft: var(--color-light-pearl);
  --color-accent: var(--color-vivid-blue);
  --color-on-dark: rgba(255, 255, 255, 0.78);
  --color-on-dark-strong: var(--color-pure-white);

  /* Gradients */
  --gradient-deep-sea: linear-gradient(rgb(0, 76, 148) 45%, rgb(41, 123, 196) 90%);
  --gradient-mono: linear-gradient(180deg, #1d1d1f 0%, #444545 100%);
  --gradient-blue: linear-gradient(180deg, #0071e3 0%, #0066cc 100%);

  /* ─────────────────────────────────────────── Typography ── */
  --font-display: "Alliance No.2", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Alliance No.2", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Font sizes — px scale used across the site. */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;
  --text-52: 52px;
  --text-56: 56px;
  --text-64: 64px;
  --text-72: 72px;
  --text-80: 80px;
  --text-88: 88px;
  --text-96: 96px;
  --text-112: 112px;
  --text-128: 128px;

  /* Semantic type aliases */
  --text-meta: var(--text-11);
  --text-caption: var(--text-13);
  --text-small: var(--text-14);
  --text-body: var(--text-17);
  --text-subheading: var(--text-21);
  --text-lead: var(--text-21);
  --text-h4: var(--text-22);
  --text-heading-sm: var(--text-28);
  --text-h3: var(--text-28);
  --text-heading: var(--text-40);
  --text-h2: var(--text-40);
  --text-heading-lg: var(--text-56);
  --text-h1: var(--text-56);
  --text-display: var(--text-80);
  --text-display-xl: var(--text-128);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;
  --leading-loose: 1.6;
  --leading-body: 1.47;
  --leading-small: 1.43;
  --leading-subheading: 1.38;
  --leading-heading-sm: 1.14;
  --leading-heading: 1.10;
  --leading-heading-lg: 1.07;
  --leading-display: 1.05;
  --leading-display-xl: 0.95;

  /* Letter spacing */
  --tracking-display-xl: -0.04em;
  --tracking-display: -0.04em;
  --tracking-heading-lg: -0.022em;
  --tracking-subheading: -0.022em;
  --tracking-body: -0.022em;
  --tracking-small: -0.016em;
  --tracking-heading-sm: -0.015em;
  --tracking-heading: -0.015em;
  --tracking-tight: -0.015em;
  --tracking-normal: -0.01em;
  --tracking-zero: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;

  /* ─────────────────────────────────────────── Spacing ── */
  /* 4pt scale — use via padding/margin/gap. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-28: 112px;
  --space-30: 120px;
  --space-32: 128px;
  --space-40: 160px;

  /* Semantic spacing */
  --section-gap: 70px;
  --section-gap-lg: 140px;
  --card-padding: var(--space-4);
  --element-gap: var(--space-3);

  /* ─────────────────────────────────────────── Layout ── */
  --container: 1080px;
  --container-wide: 1280px;
  --container-narrow: 880px;
  --content: 800px;
  --content-narrow: 640px;
  --gutter: var(--space-6);
  --nav-height: 52px;
  --title-bar-height: 48px;

  /* Breakpoints (for documentation; CSS uses inline px in @media). */
  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 900px;
  --bp-xl: 1080px;

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

  --radius-default: 12px;
  --radius-cards: 28px;
  --radius-buttons: 980px;
  --radius-navigation: 980px;

  /* ─────────────────────────────────────────── Shadows ── */
  --shadow-subtle: rgba(0, 0, 0, 0.11) 0 0 1px 0 inset;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0 4px 24px 0;

  /* ─────────────────────────────────────────── Motion ── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;

  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) ease;
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ─────────────────────────────────────────── Z-index ── */
  --z-base: 0;
  --z-title-bar: 40;
  --z-nav: 50;
  --z-modal: 100;
}