/**
 * Allomedix Design System — CSS Custom Property Tokens
 *
 * Source of truth for all color, type, spacing, radius, and shadow values.
 * Load before any component styles. Never hardcode these values elsewhere.
 *
 * Palette rationale:
 *   Trust Blue  — authority, pharmaceutical credibility
 *   Health Green — wellness, OTC / consumer products
 *   Warm Gold   — attention, promotions, highlights
 *   Rx Red      — prescription-only, always distinct from OTC
 */

:root {

  /* ── Colors ───────────────────────────────────────────────────────────── */

  /* Primary — Trust Blue */
  --am-primary:     #0E4A6B;
  --am-primary-700: #0A3550;

  /* Secondary — Health Green */
  --am-secondary:     #1B8A6B;
  --am-secondary-700: #136A52;

  /* Accent — Warm Gold */
  --am-accent: #E8A33D;

  /* Rx indicator — visually distinct, never confused with OTC */
  --am-rx:     #B5345A;
  --am-rx-bg:  #FDECF1;

  /* OTC badge background */
  --am-otc-bg: #E6F4EF;

  /* Neutral surfaces */
  --am-bg:      #F7F9FC;
  --am-surface: #FFFFFF;

  /* Text */
  --am-ink:   #0B1B2B;
  --am-muted: #6B7785;

  /* Borders / dividers */
  --am-border: #E2E8F0;

  /* ── Typography ───────────────────────────────────────────────────────── */

  --am-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --am-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Type scale */
  --am-fs-xs:      0.75rem;   /*  12px */
  --am-fs-sm:      0.875rem;  /*  14px */
  --am-fs-base:    1rem;      /*  16px */
  --am-fs-lg:      1.125rem;  /*  18px */
  --am-fs-xl:      1.5rem;    /*  24px */
  --am-fs-2xl:     2rem;      /*  32px */
  --am-fs-3xl:     2.5rem;    /*  40px */
  --am-fs-display: 3.5rem;    /*  56px */

  /* Line heights */
  --am-lh-tight: 1.2;
  --am-lh-base:  1.6;

  /* ── Spacing (0.25 rem base) ──────────────────────────────────────────── */

  --am-sp-1:  0.25rem;  /*  4px */
  --am-sp-2:  0.5rem;   /*  8px */
  --am-sp-3:  0.75rem;  /* 12px */
  --am-sp-4:  1rem;     /* 16px */
  --am-sp-5:  1.25rem;  /* 20px */
  --am-sp-6:  1.5rem;   /* 24px */
  --am-sp-8:  2rem;     /* 32px */
  --am-sp-10: 2.5rem;   /* 40px */
  --am-sp-12: 3rem;     /* 48px */
  --am-sp-16: 4rem;     /* 64px */
  --am-sp-20: 5rem;     /* 80px */
  --am-sp-24: 6rem;     /* 96px */

  /* ── Border radii ─────────────────────────────────────────────────────── */

  --am-radius-sm:   4px;
  --am-radius:      8px;
  --am-radius-lg:   16px;
  --am-radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */

  --am-shadow-sm: 0 1px 3px rgba(11, 27, 43, 0.08),
                  0 1px 2px rgba(11, 27, 43, 0.04);

  --am-shadow:    0 4px 12px rgba(11, 27, 43, 0.10),
                  0 1px  4px rgba(11, 27, 43, 0.06);

  --am-shadow-lg: 0 12px 32px rgba(11, 27, 43, 0.12),
                  0  4px 12px rgba(11, 27, 43, 0.08);

}