/* ==========================================================================
   Design Tokens — Anthems Empire
   Verified from live getComputedStyle() across 1440px, 768px, and 375px
   ========================================================================== */

:root {
  /* Color Palette */
  --color-primary: #A27149;
  --color-primary-tint: rgba(162, 113, 73, 0.10);
  --color-primary-muted: rgba(162, 113, 73, 0.25);
  --color-charcoal: #363435;
  --color-charcoal-deep: #343233;
  --color-dark: #212529;
  --color-taupe: #605050;
  --color-teal-toggler: #27757F;
  --color-muted: #818899;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-surface-input: #F7F7F7;
  --color-border-gray: #DDDDDD;
  --color-border-input: #D4D4D4;
  --color-error: #DC3545;
  --color-success: #198754;

  /* Overlays */
  --overlay-hero: rgba(0, 0, 0, 0.30);
  --overlay-page-head: rgba(255, 255, 255, 0.60);
  --overlay-backdrop: rgba(0, 0, 0, 0.70);

  /* Typography */
  --font-primary: 'Marcellus', sans-serif;

  /* Font Sizes */
  --fs-xs: 0.875rem;      /* 14px - inputs, footer links, copyright */
  --fs-breadcrumb: 0.9375rem; /* 15px - active breadcrumb */
  --fs-base: 1rem;        /* 16px - body, nav links, buttons */
  --fs-md: 1.125rem;      /* 18px - counter labels, card bars, about items */
  --fs-lg: 1.25rem;       /* 20px - hero desc, h5, footer titles */
  --fs-card-h4: 1.375rem; /* 22px - vision h4, client-name, inquiry h4 */
  --fs-strength: 1.75rem; /* 28px - core strengths heading desktop */
  --fs-xl: 1.875rem;      /* 30px - about lead heading, mobile hero/page title */
  --fs-cta: 2rem;         /* 32px - CTA banner h3 desktop */
  --fs-section: 2.1875rem;/* 35px - gallery, projects, testimonials desktop */
  --fs-section-md: 2.375rem; /* 38px - tablet section title */
  --fs-2xl: 2.5rem;       /* 40px - hero title, page banner title, counter value */
  --fs-video: 2.75rem;    /* 44px - video section title desktop */

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

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-about: 1.39;       /* 25px at 18px */
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* Spacing & Layout */
  --gutter-inline: 12px;  /* 24px total column gap */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-header: 1200px;
  --container-xxl: 1320px;

  --section-pad-sm: 50px;
  --section-pad-md: 60px;
  --section-pad-lg: 80px;
  --section-pad-xl: 100px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-card: 10px;
  --radius-lg: 15px;
  --radius-full: 50%;
  --radius-asym: 50% 20% / 10% 40%;

  /* Shadows */
  --shadow-header: 0px 0px 60px 0px rgba(0, 0, 0, 0.10);
  --shadow-gallery: 0px 5px 10px 0px rgba(7, 28, 26, 0.17);
  --shadow-project-gallery: 0px 5px 10px 0px rgba(7, 28, 31, 0.10);
  --shadow-video: 0px 5px 10px 0px rgba(7, 28, 31, 0.04);
  --shadow-project-icon: 5px 5px 15px 0px rgba(209, 217, 230, 0.50);
  --shadow-vision: 5px 5px 15px 0px rgba(0, 0, 0, 0.08);
  --shadow-vision-hover: 0px 10px 20px 0px rgba(19, 19, 19, 0.102);
  --shadow-testimonial: 0px 0px 20px 0px rgba(0, 0, 0, 0.051);
  --shadow-career: 0px 0px 15px 0px rgba(0, 0, 0, 0.19);
  --shadow-contact-form: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
  --shadow-contact-card: 5px 5px 15px 0px rgba(0, 0, 0, 0.094);

  /* Z-Index Scale */
  --z-whatsapp: 999;
  --z-header: 1000;
  --z-modal: 1050;
  --z-toast: 1100;

  /* Motion & Transitions */
  --ease-standard: ease-in-out;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-media: 500ms;
  --duration-aos-default: 600ms;
  --duration-aos-long: 1000ms;
}