/* Hallmark: theme: midnight | material: executive-dark | job: hire | signature: tabular-proof-hero */
:root {
  /* Surfaces & Canvas */
  --color-paper: #080c14;
  --color-paper-2: #0f1622;
  --color-paper-3: #162030;
  --color-paper-card: rgba(15, 22, 34, 0.85);
  --color-paper-translucent: rgba(8, 12, 20, 0.8);
  --color-paper-glass: rgba(22, 32, 48, 0.65);
  --color-overlay-start: rgba(8, 12, 20, 0.2);
  --color-overlay-end: rgba(8, 12, 20, 0.95);

  /* Typography Inks */
  --color-ink: #f8fafc;
  --color-ink-2: #cbd5e1;
  --color-muted: #8896ab;

  /* Accent & Signals */
  --color-accent: #f43f8e;
  --color-accent-deep: #db2777;
  --color-accent-soft: rgba(244, 63, 142, 0.12);
  --color-accent-glow: rgba(244, 63, 142, 0.24);
  --color-accent-ink: #080c14;
  --color-focus: #f43f8e;

  /* Structural Rules & Borders */
  --color-rule: rgba(255, 255, 255, 0.08);
  --color-rule-2: rgba(255, 255, 255, 0.14);
  --color-rule-accent: rgba(244, 63, 142, 0.4);

  /* Elevation Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 20px 48px -12px rgba(0, 0, 0, 0.7);

  /* Typography Families & Fluid Sizes */
  --font-display: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Karla', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --text-hero: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
  --text-h1: clamp(1.85rem, 3.5vw + 0.3rem, 2.75rem);
  --text-h2: clamp(1.5rem, 2.5vw + 0.25rem, 2.15rem);
  --text-h3: clamp(1.15rem, 1.5vw + 0.2rem, 1.45rem);
  --text-body: clamp(0.95rem, 0.5vw + 0.5rem, 1.05rem);
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Corner Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* 4px Spacing Scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Motion & Timings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-normal: 280ms;

  /* Container */
  --container-max: 1200px;
  --container-narrow: 840px;
  --container-gutter: clamp(16px, 4vw, 32px);
  --section-gap: 24px;
}