:root {
  /* ── Palette ── */
  --bg: #0a0a0a;
  --gold: #d4a85a;
  --gold-soft: #a88a45;
  --gold-bg: rgba(212, 168, 90, 0.10);
  --gold-border: rgba(212, 168, 90, 0.25);
  --gold-border-strong: rgba(212, 168, 90, 0.40);
  --green: #3fa84e;
  --green-bright: #4ec85f;
  --coral: #e58468;
  --white-color: #f3efe7;
  --mute: #7a766c;
  --line: rgba(243, 239, 231, 0.08);
  --line-strong: rgba(243, 239, 231, 0.18);

  /* ── Component backgrounds ── */
  --nav-bg: linear-gradient(180deg, rgba(50, 40, 12, 0.88), rgba(34, 28, 8, 0.88));
  --nav-border: rgba(212, 168, 90, 0.22);
  --nav-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-bg: linear-gradient(180deg, rgba(20, 20, 20, 0.92), rgba(13, 13, 13, 0.92));
  --card-bg: linear-gradient(180deg, #141414, #0d0d0d);

  /* ── Radius ── */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-icon: 10px;
  --radius-btn: 8px;
  --radius-tag: 6px;

  /* ── Blur ── */
  --blur-nav: blur(10px);
  --blur-glass: blur(20px);

  /* ── Surfaces ── */
  --surface-4: rgba(255, 255, 255, 0.04);
  --surface-5: rgba(255, 255, 255, 0.05);
  --surface-8: rgba(255, 255, 255, 0.08);

  /* ── Shadows ── */
  --shadow-glass: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ── Focus ── */
  --focus-ring: 0 0 0 3px rgba(212, 168, 90, 0.12);

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;
  --transition-xslow: 0.4s ease;

  /* ── Line heights ── */
  --lh-normal: normal;
  --lh-display: 0.9;
  --lh-none: 1;
  --lh-tight: 1.02;
  --lh-heading: 1.15;
  --lh-input: 1.25;
  --lh-body: 1.5;
  --lh-relaxed: 1.55;
  --lh-loose: 1.6;

  /* ── Typography spacing ── */
  --mb-heading: 0.5rem;
  --mb-paragraph: 1rem;

  /* ── Font families ── */
  --body-font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --heading-font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --mono-font-family: 'JetBrains Mono', monospace;
  --display-font-family: 'Caveat', cursive;

  /* ── Font weights ── */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Font sizes ── */
  --font-size-2xs: 10.5px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-nav: 15px;
  --btn-font-size: 14px;
  --menu-font-size: 16px;
  --p-font-size: 18px;
  --h6-font-size: 20px;
  --h5-font-size: 22px;
  --h4-font-size: 24px;
  --h3-font-size: 28px;
  --h2-font-size: 36px;
  --h1-font-size: 62px;

  /* ── Letter spacing ── */
  --tracking-tightest: -0.04em;
  --tracking-heading: -0.025em;
  --tracking-card: -0.02em;
  --tracking-sm: 0.01em;
  --tracking-normal: 0.02em;
  --tracking-wide: 0.04em;
  --tracking-label: 0.12em;
  --tracking-logo: 0.18em;

  /* ── Gaps ── */
  --gap-3xs: 2px;
  --gap-2xs: 4px;
  --gap-xs: 6px;
  --gap-icon: 7px;
  --gap-sm: 10px;
  --gap-md: 12px;
  --gap-base: 16px;
  --gap-grid: 18px;
  --gap-nav: 28px;
  --gap-lg: 32px;
  --gap-field: 20px;

  /* ── Component padding ── */
  --padding-badge: 6px 14px;
  --padding-status: 4px 10px;
  --padding-tag: 3px 8px;
  --padding-btn: 7px 14px;
  --padding-btn-cta: 8px 22px;
  --padding-submit: 12px 20px;
  --padding-card: 26px;
  --padding-input: 12px 16px;
  --padding-input-compact: 10px 16px;
  --padding-float-input: 1.2rem 16px 0.4rem;
  --padding-float-label: 1rem 16px;
  --float-pt: 1.5rem;
  --float-pb: 0.4rem;

  /* ── Status message colors ── */
  --success-text-color: #4ec85f;
  --warning-text-color: #d4a85a;
  --error-text-color: #e58468;

  /* ── Border ── */
  --border-width: 1px;

  /* ── Line / hover ── */
  --line-hover: rgba(243, 239, 231, 0.3);

  /* ── Z-index layers ── */
  --z-bg: -1;
  --z-content: 2;
  --z-ink: 10;
  --z-ui: 100;
  --z-tooltip: 200;

  /* ── Indicator dot ── */
  --dot-size: 6px;

  /* ── Glow effects ── */
  --glow-sm: 0 0 8px;
  --glow-md: 0 0 12px;

  /* ── Card components ── */
  --z-base: 0;
  --arrow-angle: -45deg;
  --arrow-hover-offset: 2px;
  --corner-n-size: 240px;
  --corner-n-offset: -30px;
  --corner-n-opacity: 0.08;
  --corner-n-opacity-hover: 0.42;
  --card-desc-width: 42ch;
  --shadow-card-hover: 0 24px 60px -20px;
  --card-accent-border: 40%;
  --card-accent-shadow: 34%;
  --card-accent-inset: 25%;
  --card-accent-glyph-bg: 12%;
  --card-accent-glyph-border: 33%;
  --glyph-size: 36px;
  --arrow-size: 40px;
  --card-title-lg: 42px;
  --card-title-md: 32px;
  --card-title-sm: 26px;

  /* ── Hero ── */
  --font-size-hero: clamp(44px, 6.2vw, 92px);
  --hero-inner-max-width: 760px;
  --hero-desc-max-width: 560px;
  --hero-italic-rotate: -2deg;
  --hero-tablet-pt: 40px;
  --hero-tablet-pb: 20px;
  --hero-title-mt: 18px;
  --hero-desc-mt: 34px;

  /* ── Page spacing ── */
  --space-inner: 24px;
  --header-offset: 100px;
  --padding-nav-y: 14px;
  --space-page: 56px;
  --space-page-md: 28px;
  --space-page-sm: 16px;
  --space-grid-mb: 80px;
  --space-grid-mb-md: 60px;
  --space-grid-mb-sm: 48px;
  --legend-pt: 24px;
  --legend-pb: 64px;
  --legend-pb-md: 48px;
  --form-page-pt: 120px;
  --form-page-x: 24px;
  --form-page-pb: 48px;
  --form-inner-pt: 40px;
  --form-inner-x: 44px;
  --form-max-width: 460px;

  /* ── Form / floating input ── */
  --font-size-input: 0.95rem;
  --font-size-label: 0.9rem;
  --input-height: 52px;
  --input-height-float: calc(3.5rem + 4px);
  --textarea-height: 120px;

  /* ── Error page ── */
  --font-size-error-code: 96px;

  /* ── Status ── */
  --status-page-max-width: 900px;
  --status-hero-mb: 40px;
  --status-bar-height: 30px;
  --status-bar-min-width: 2px;
  --status-bar-radius: 2px;
  --status-metric-min-width: 118px;
  --status-dim: 0.55;

  /* ── Resume ── */
  --resume-initials-size: 42px;
  --resume-contact-lbl-w: 42px;
  --resume-sidebar-w: 260px;
  --resume-period-w: 100px;
}