/* Capital Vision Care — Design Tokens
   Lifted from the CVC Design System (tokens/colors|typography|spacing|effects.css).
   Single source of truth for the theme. Fonts are self-hosted (assets/fonts/, latin
   subset) so there is no render-blocking third-party request and no visitor IP leak
   to Google (PIPEDA). Mulish ships as one variable file (weights 300-800); Poppins
   as static instances. font-display:swap keeps text visible during load.
   ⚠ Colours & fonts were inferred from the brand wordmark — confirm exact values with the team. */

@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/mulish.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800.woff2') format('woff2'); }

:root {
  /* ---- Brand: Navy (anchor) ---- */
  --cvc-navy-900: #0E2033;
  --cvc-navy-800: #15304A; /* core brand navy */
  --cvc-navy-700: #1E4264;
  --cvc-navy-600: #2A567E;
  --cvc-navy-500: #3C6B96;

  /* ---- Brand: Aqua-Teal (primary) ---- */
  --cvc-teal-700: #156E86;
  --cvc-teal-600: #1C8AA6; /* core accent */
  --cvc-teal-500: #2BA6C2;
  --cvc-teal-400: #5DC2D6;
  --cvc-teal-300: #93D7E4;
  --cvc-teal-100: #D9F0F5;
  --cvc-teal-bright: #34A6B2;

  /* ---- Brand: Gold (warm CTA) ---- */
  --cvc-gold-600: #C9883A;
  --cvc-gold-500: #DDA14B; /* core CTA */
  --cvc-gold-400: #E8B86B;
  --cvc-gold-100: #F7EAD2;

  /* ---- Neutrals ---- */
  --cvc-white:    #FFFFFF;
  --cvc-fog-50:   #F5F8FA;
  --cvc-fog-100:  #EAF1F5;
  --cvc-fog-200:  #D7E1E8;
  --cvc-gray-300: #B6C3CD;
  --cvc-gray-400: #92A2AE;
  --cvc-gray-500: #6B7C88;
  --cvc-gray-600: #4D5C68;
  --cvc-ink-900:  #14263A;

  /* ---- Semantic status ---- */
  --cvc-success: #2E9E6B;
  --cvc-warning: #E0A33A;
  --cvc-danger:  #D2543F;
  --cvc-info:    #1C8AA6;

  /* ---- Glass tints ---- */
  --cvc-glass-light:  rgba(255, 255, 255, 0.62);
  --cvc-glass-dark:   rgba(14, 32, 51, 0.42);
  --cvc-glass-border: rgba(255, 255, 255, 0.55);

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--cvc-fog-50);
  --color-bg-deep:       var(--cvc-navy-800);
  --surface-card:        var(--cvc-white);
  --surface-muted:       var(--cvc-fog-100);
  --surface-glass:       var(--cvc-glass-light);

  --text-strong:         var(--cvc-ink-900);
  --text-body:           var(--cvc-gray-600);
  --text-muted:          var(--cvc-gray-500);
  --text-on-dark:        var(--cvc-white);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.72);

  --color-primary:       var(--cvc-teal-600);
  --color-primary-hover: var(--cvc-teal-700);
  --color-accent:        var(--cvc-teal-600);
  --color-accent-hover:  var(--cvc-teal-700);
  --color-cta:           #EFA232;
  --color-cta-hover:     #D98F1E;

  --border-subtle:       var(--cvc-fog-200);
  --border-strong:       var(--cvc-gray-300);
  --border-on-dark:      rgba(255, 255, 255, 0.18);
  --focus-ring:          var(--cvc-teal-500);

  /* ---- Typography ---- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --fs-display:  3.5rem;
  --fs-h1:       2.5rem;
  --fs-h2:       2rem;
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lead:     1.25rem;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-overline: 0.8125rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-overline: 0.14em;

  /* ---- Spacing (8px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---- Radii (modest, never pill) ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-round: 50%;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Elevation (shadows only, never glows) ---- */
  --shadow-xs:  0 1px 2px rgba(14, 32, 51, 0.06);
  --shadow-sm:  0 2px 6px rgba(14, 32, 51, 0.08);
  --shadow-md:  0 6px 18px rgba(14, 32, 51, 0.10);
  --shadow-lg:  0 14px 36px rgba(14, 32, 51, 0.14);
  --shadow-xl:  0 28px 60px rgba(14, 32, 51, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(14, 32, 51, 0.08);

  /* ---- Frost glass ---- */
  --glass-blur: 16px;
  --glass-blur-strong: 28px;

  /* ---- Motion (calm, no bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}