:root {
  /* ==========================================================================
     Typography — Retro Woodblock Display, Editorial Serif & Clean Sans
     ========================================================================== */
  --font-display-retro: 'Bebas Neue', 'Oswald', -apple-system, sans-serif;
  --font-heading-retro: 'Oswald', 'Bebas Neue', sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Courier Prime', 'Space Mono', monospace;

  /* Aliases for semantic usage */
  --font-heading: var(--font-heading-retro);
  --font-serif: var(--font-editorial);
  --font-display: var(--font-display-retro);

  /* Fluid typography scale */
  --font-size-2xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11px - 12px */
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);      /* 12px - 13px */
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);      /* 14px - 15px */
  --font-size-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);       /* 16px - 17px */
  --font-size-lg: clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);       /* 18px - 20px */
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);          /* 20px - 24px */
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);       /* 24px - 30px */
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.5rem);        /* 30px - 40px */
  --font-size-4xl: clamp(2.5rem, 2.1rem + 2vw, 3.75rem);            /* 40px - 60px */
  --font-size-hero: clamp(3.25rem, 2.5rem + 4vw, 5.75rem);          /* 52px - 92px bold retro title */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.05;
  --line-height-snug: 1.25;
  --line-height-base: 1.65;
  --line-height-relaxed: 1.8;

  /* ==========================================================================
     Spacing System
     ========================================================================== */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-28: 7rem;      /* 112px */
  --space-32: 8rem;      /* 128px */

  /* ==========================================================================
     Border Radius — Crisp retro framing (small radii, badges, frames)
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ==========================================================================
     Layout & Container Sizes
     ========================================================================== */
  --container-max-width: 1140px;
  --container-narrow-width: 820px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --header-height: 4.75rem; /* 76px */

  /* ==========================================================================
     Motion & Transitions
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-negative: -1;
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ==========================================================================
     RETRO COLOR PALETTE (Directly inspired by reference design)
     Teal / Turquoise + Warm Cream + Burnt Orange + Stone Grey + Dark Charcoal
     ========================================================================== */

  /* 1. RETRO MUTED TEAL / TURQUOISE (Header & Hero Block) */
  --retro-teal: #5b8e8f;
  --retro-teal-dark: #446e6f;
  --retro-teal-deep: #2c4d4e;
  --retro-teal-light: #76a7a8;
  --retro-teal-pale: #e2eeee;
  --retro-teal-contrast: #f7f3eb;

  /* 2. RETRO WARM CREAM / NEWSPRINT (About Block, Inputs, Mat Frames) */
  --retro-cream: #f4efe4;
  --retro-cream-alt: #ebe3d3;
  --retro-cream-paper: #ded5c2;
  --retro-cream-border: #ccbeaa;
  --retro-cream-text: #2c3033;

  /* 3. RETRO BURNT ORANGE / CORAL (Portfolio Block, Badges, CTAs) */
  --retro-orange: #d25d38;
  --retro-orange-dark: #b54724;
  --retro-orange-deep: #8a3114;
  --retro-orange-light: #e47552;
  --retro-orange-pale: #fbeee8;
  --retro-orange-contrast: #ffffff;

  /* 4. RETRO HEATHER GREY / STONE (Services & Magazine Block) */
  --retro-grey: #dedad1;
  --retro-grey-alt: #d1cbc0;
  --retro-grey-dark: #595750;
  --retro-grey-ink: #2b2c2b;

  /* 5. RETRO INK CHARCOAL (Contact Block, Footer, Linework) */
  --retro-charcoal: #2c2f32;
  --retro-charcoal-dark: #1e2022;
  --retro-charcoal-light: #3f4347;
  --retro-charcoal-contrast: #f4efe4;

  /* Crisp Graphic Linework */
  --retro-border-ink: #232629;
  --retro-border-thin: 1px solid rgba(35, 38, 41, 0.22);
  --retro-border-bold: 2px solid #232629;
  --retro-border-frame: 4px solid #ffffff;

  /* System Semantics mapped to Retro Palette */
  --color-bg: var(--retro-cream);
  --color-surface: #ffffff;
  --color-text-main: var(--retro-charcoal-dark);
  --color-text-muted: #52575d;
  --color-text-subtle: #747a82;

  --color-primary: var(--retro-orange);
  --color-primary-hover: var(--retro-orange-dark);
  --color-primary-text: #ffffff;

  --color-accent: var(--retro-teal);
  --color-accent-hover: var(--retro-teal-dark);

  --color-border: rgba(35, 38, 41, 0.16);
  --color-border-subtle: rgba(35, 38, 41, 0.08);
  --color-border-strong: rgba(35, 38, 41, 0.4);
  --color-divider: rgba(35, 38, 41, 0.12);

  --color-success: #2d7a54;
  --color-success-light: #e6f3ec;

  /* ==========================================================================
     Retro Shadows & 3D Extrusions
     ========================================================================== */
  --shadow-retro-hard: 3px 3px 0 rgba(35, 38, 41, 0.85);
  --shadow-retro-hard-lg: 5px 5px 0 rgba(35, 38, 41, 0.9);
  --shadow-retro-title: 3px 3px 0 var(--retro-teal-deep), 6px 6px 0 rgba(30, 45, 45, 0.45);
  --shadow-retro-frame: 0 8px 24px rgba(35, 38, 41, 0.12), 0 2px 6px rgba(35, 38, 41, 0.08);
  --shadow-inner-bevel: inset 0 1px 3px rgba(0, 0, 0, 0.18);

  /* Subtle vintage paper texture pattern */
  --texture-halftone: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  --texture-stitching: 2px dashed rgba(255, 255, 255, 0.45);
}