/* ==========================================================================
   Design tokens - Pentax Pharmaceuticals
   Palette derived from the brand logo (azure bar + crimson pentagon),
   anchored by a deep navy for trust and an aqua accent for freshness.
   ========================================================================== */

:root {
  /* Brand */
  --c-navy-900: #071528;
  --c-navy-800: #0b1f3a;
  --c-navy-700: #12305a;
  --c-navy-600: #1b4278;
  --c-azure-500: #0a84ff;     /* logo blue - decorative / large text only */
  --c-azure-600: #0763c9;     /* accessible primary on white (6.1:1) */
  --c-azure-700: #054e9f;
  --c-azure-50:  #eaf3ff;
  --c-aqua-400:  #2fd0d9;
  --c-aqua-500:  #14b8c4;
  --c-aqua-100:  #d8f6f8;
  --c-crimson-500: #d7263d;   /* logo red - small accents, errors */
  --c-crimson-50:  #fdecee;
  --c-green-600: #0f7b55;
  --c-green-50:  #e6f6ef;

  /* Neutrals */
  --c-ink:       #0e1b2c;
  --c-text:      #33465c;     /* body text on white: 9.6:1 */
  --c-muted:     #5b6f86;     /* secondary text on white: 5.1:1 */
  --c-line:      #dbe4ee;
  --c-line-soft: #e9eff5;
  --c-surface:   #ffffff;
  --c-surface-2: #f5f8fc;
  --c-surface-3: #edf2f8;

  /* Semantic */
  --c-primary:       var(--c-azure-600);
  --c-primary-hover: var(--c-azure-700);
  --c-focus:         #0a84ff;
  --c-success:       var(--c-green-600);
  --c-error:         #b3192e;

  /* Gradients */
  --g-brand: linear-gradient(135deg, var(--c-azure-600) 0%, var(--c-aqua-500) 100%);
  --g-navy:  linear-gradient(140deg, var(--c-navy-900) 0%, var(--c-navy-700) 55%, #0f4a6e 100%);
  --g-soft:  radial-gradient(60% 60% at 85% 10%, rgba(20, 184, 196, .16) 0%, transparent 60%),
             radial-gradient(50% 55% at 5% 30%, rgba(10, 132, 255, .12) 0%, transparent 60%),
             linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);

  /* Typography */
  --ff-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (360px -> 1440px) */
  --fs-xs:   clamp(.78rem, .76rem + .1vw, .84rem);
  --fs-sm:   clamp(.875rem, .85rem + .12vw, .95rem);
  --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --fs-lg:   clamp(1.3rem, 1.2rem + .45vw, 1.6rem);
  --fs-xl:   clamp(1.6rem, 1.38rem + 1vw, 2.25rem);
  --fs-2xl:  clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --fs-3xl:  clamp(2.35rem, 1.75rem + 2.8vw, 4.1rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-y: clamp(4rem, 2.8rem + 5.5vw, 7.5rem);
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --container: 1240px;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(14, 27, 44, .06);
  --shadow-sm: 0 2px 8px rgba(14, 27, 44, .06), 0 1px 2px rgba(14, 27, 44, .04);
  --shadow-md: 0 12px 32px -10px rgba(14, 27, 44, .16), 0 2px 6px rgba(14, 27, 44, .05);
  --shadow-lg: 0 30px 60px -20px rgba(11, 31, 58, .28), 0 8px 18px -8px rgba(11, 31, 58, .12);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .6);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 700ms;

  --header-h: 84px;
  --header-h-compact: 66px;
}

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