/*
 * YS Pharma design tokens.
 * Only CSS custom properties and @font-face: loading this file changes nothing visually.
 * Documented in docs/DESIGN-SYSTEM.md.
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour — core values kept from the site's existing Elementor kit */
  --ysp-brand-ink: #1e1c3a; /* YS symbol ink, measured from the pack print */
  --ysp-navy-900: #0b2239;
  --ysp-navy-700: #12365a;
  --ysp-navy-500: #2a5683;
  --ysp-teal-700: #066a75;
  --ysp-teal-600: #087f8c;
  --ysp-teal-300: #7fd3da;
  --ysp-teal-100: #e3f4f5;
  --ysp-ink: #273b50;
  --ysp-muted: #51657a;
  --ysp-line: #dce5ee;
  --ysp-mist: #f4f8fb;
  --ysp-white: #ffffff;
  --ysp-on-dark: #ffffff;
  --ysp-on-dark-muted: #b3c2d1;

  --ysp-color-primary: var(--ysp-navy-700);
  --ysp-color-accent: var(--ysp-teal-600);
  --ysp-color-link: var(--ysp-teal-700);
  --ysp-color-text: var(--ysp-ink);
  --ysp-color-bg: var(--ysp-white);
  --ysp-color-bg-alt: var(--ysp-mist);
  --ysp-focus: var(--ysp-teal-600);

  /* Background of the studio pack shots — product cards use it so photos blend in seamlessly */
  --ysp-studio: #faf9f7;

  /* Typography — Manrope headings (approved option A), Inter body */
  --ysp-font-body: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ysp-font-heading: "Manrope Variable", "Manrope", var(--ysp-font-body);

  --ysp-text-xs: 0.78125rem;                                  /* 12.5px */
  --ysp-text-sm: 0.875rem;                                    /* 14px */
  --ysp-text-base: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);  /* 16 → 17px */
  --ysp-text-lg: clamp(1.125rem, 1.09rem + 0.19vw, 1.25rem);  /* 18 → 20px */
  --ysp-text-h3: clamp(1.3125rem, 1.24rem + 0.37vw, 1.625rem);/* 21 → 26px */
  --ysp-text-h2: clamp(1.75rem, 1.5rem + 1.11vw, 2.5rem);     /* 28 → 40px */
  --ysp-text-h1: clamp(2.125rem, 1.67rem + 2.04vw, 3.5rem);   /* 34 → 56px */
  --ysp-text-display: clamp(2.5rem, 1.83rem + 2.96vw, 4.5rem);/* 40 → 72px */

  --ysp-leading-tight: 1.12;
  --ysp-leading-snug: 1.3;
  --ysp-leading-body: 1.65;
  --ysp-tracking-tight: -0.02em;
  --ysp-tracking-eyebrow: 0.14em;
  --ysp-measure: 68ch;

  /* Spacing (4px base) */
  --ysp-space-1: 0.25rem;
  --ysp-space-2: 0.5rem;
  --ysp-space-3: 0.75rem;
  --ysp-space-4: 1rem;
  --ysp-space-5: 1.5rem;
  --ysp-space-6: 2rem;
  --ysp-space-7: 3rem;
  --ysp-space-8: 4rem;
  --ysp-space-9: 6rem;
  --ysp-space-10: 8rem;
  --ysp-section: clamp(4rem, 2.8rem + 5.3vw, 8rem);           /* 64 → 128px */

  /* Layout */
  --ysp-container: 75rem;      /* 1200px */
  --ysp-container-wide: 85rem; /* 1360px */
  --ysp-container-narrow: 47.5rem; /* 760px */
  --ysp-gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);       /* 20 → 40px */

  /* Shape */
  --ysp-radius-sm: 8px;
  --ysp-radius-md: 14px;
  --ysp-radius-lg: 24px;
  --ysp-radius-pill: 999px;

  /* Elevation — navy-tinted, soft */
  --ysp-shadow-1: 0 1px 2px rgb(11 34 57 / 0.06), 0 2px 8px rgb(11 34 57 / 0.05);
  --ysp-shadow-2: 0 4px 12px rgb(11 34 57 / 0.07), 0 12px 32px rgb(11 34 57 / 0.08);
  --ysp-shadow-3: 0 12px 24px rgb(11 34 57 / 0.08), 0 28px 64px rgb(11 34 57 / 0.12);

  /* Motion */
  --ysp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ysp-dur-fast: 160ms;
  --ysp-dur: 320ms;
  --ysp-dur-slow: 700ms;

  --ysp-header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ysp-dur-fast: 0ms;
    --ysp-dur: 0ms;
    --ysp-dur-slow: 0ms;
  }
}