/* ====================================================================
   CARDIOLYSE DESIGN TOKENS
   Built from Cardiolyse Brand Style Guide 2023
   Cobalt Blue primary, Navy anchors, Aquamarine/Raspberry/Tangerine accents
   Sand Beige warm surface. Alexer (display) + Inter (body) per brand book.
   ==================================================================== */

/* ============= ALEXER (display) — licensed webfont ============= */
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alexer';
  src: url('../fonts/Alexer-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand color palette (from PDF style guide) ---------- */
  --c-navy-900:      #070F57;   /* Cobalt darkest — primary dark */
  --c-navy-700:      #163192;
  --c-blue-500:      #4667DD;   /* Cobalt Blue — primary */
  --c-blue-400:      #6688FF;   /* Cobalt lighter — brand blue */
  --c-aqua:          #66E4FF;
  --c-raspberry:     #FF669D;
  --c-tangerine:     #FFA666;
  --c-beige:         #FDF7EE;   /* Sand Beige — warm surface */
  --c-beige-soft:    #F9F0E4;
  --c-white:         #FFFFFF;
  --c-black:         #000000;
  --c-grey-900:      #1A1D2E;
  --c-grey-700:      #484448;
  --c-grey-400:      #8A8890;
  --c-grey-200:      #D7D5D7;
  --c-grey-100:      #EEECEE;

  /* ---------- Semantic assignments ---------- */
  --bg:              var(--c-beige);            /* page canvas */
  --bg-elevated:     var(--c-white);
  --bg-dark:         var(--c-navy-900);
  --bg-blue:         var(--c-blue-400);
  --ink:             var(--c-navy-900);         /* primary text */
  --ink-muted:       rgba(7, 15, 87, 0.68);
  --ink-subtle:      rgba(7, 15, 87, 0.48);
  --ink-on-dark:     rgba(255, 255, 255, 0.94);
  --ink-on-dark-muted: rgba(255, 255, 255, 0.68);
  --accent:          var(--c-blue-500);
  --accent-hover:    var(--c-navy-700);
  --border:          rgba(7, 15, 87, 0.12);
  --border-strong:   rgba(7, 15, 87, 0.22);
  --border-dark:     rgba(255, 255, 255, 0.14);

  /* ---------- Gradients (from brand guide §04) ---------- */
  --grad-blue-cream:    linear-gradient(180deg, #6688FF 0%, #FDF7EE 100%);
  --grad-aqua-cream:    linear-gradient(180deg, #66E4FF 0%, #FDF7EE 100%);
  --grad-raspberry:     linear-gradient(180deg, #FF669D 0%, #FDF7EE 100%);
  --grad-tangerine:     linear-gradient(180deg, #FFA666 0%, #FDF7EE 100%);
  --grad-brand-symbol:  linear-gradient(135deg, #6688FF 0%, #4667DD 60%, #163192 100%);

  /* ---------- Typography (per Cardiolyse brand book) ---------- */
  --font-display:    'Alexer', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type scale */
  --text-xs:         clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12-13 */
  --text-sm:         clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14-15 */
  --text-base:       clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);       /* 16-17 */
  --text-lg:         clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);    /* 18-20 */
  --text-xl:         clamp(1.375rem, 1.25rem + 0.65vw, 1.625rem);   /* 22-26 */
  --text-2xl:        clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);        /* 28-40 */
  --text-3xl:        clamp(2.25rem, 1.6rem + 3vw, 3.5rem);          /* 36-56 */
  --text-hero:       clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);        /* 44-88 */
  --text-stat:       clamp(2.75rem, 2rem + 4vw, 5rem);              /* 44-80 */

  /* Line heights */
  --lh-tight:        1.02;
  --lh-heading:      1.08;
  --lh-body:         1.55;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Layout ---------- */
  --container:       1240px;
  --container-tight: 960px;
  --gutter:          clamp(20px, 4vw, 40px);
  --section-y:       clamp(64px, 9vw, 128px);

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(7, 15, 87, 0.06);
  --shadow-md:  0 4px 16px rgba(7, 15, 87, 0.08);
  --shadow-lg:  0 20px 60px -12px rgba(7, 15, 87, 0.18);
  --shadow-blue: 0 20px 40px -12px rgba(70, 103, 221, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}