/* ============================================================================
   DESIGN TOKENS — PostScript Pharmacy
   ============================================================================
   This file publishes TWO token sets in :root simultaneously:

     1. `--ps-*` tokens — Direction A "Editorial Healthtech" (Phase 2 forward)
        Source: design handoff bundle, project/site/shared.jsx PS_TOKENS
        Used by pages migrated to the new aesthetic.

     2. `--color-*`, `--font-*`, etc. tokens — Legacy palette (pre-rework)
        Used by pages still rendering in the old style. Removed when the
        last consumer is migrated.

   Phase 1 strategy: ADD the new tokens; do NOT remove the legacy ones.
   Existing pages keep working untouched while Phase 2 rebuilds adopt --ps-*.
   ============================================================================ */

:root {
    /* ════════════════════════════════════════════════════════════════════
       DIRECTION A — Editorial Healthtech (NEW, Phase 291+)
       ════════════════════════════════════════════════════════════════════ */

    /* ── PS Colors ── */
    --ps-bg:           #F6F5F1;          /* warm bone page background */
    --ps-ink:          #0F1E1C;          /* near-black body text */
    --ps-ink-muted:    #5A6563;
    --ps-ink-soft:     #8A9694;
    --ps-teal:         #0E5D59;          /* brand primary (evolved teal) */
    --ps-teal-deep:    #0A4441;
    --ps-teal-light:   #D7E8E4;
    --ps-mint:         #C9E8D8;
    --ps-cream:        #F0EADF;
    --ps-sand:         #E8DFCC;
    --ps-accent:       #E8693C;          /* warm coral — sparing use */
    --ps-line:         rgba(15, 30, 28, 0.10);
    --ps-line-strong:  rgba(15, 30, 28, 0.18);
    --ps-card:         #FFFFFF;

    /* WCAG AA-safe text on the dark ink section (4.7:1 on --ps-ink). */
    --ps-ink-on-dark-muted: #A5B3B0;
    /* Verified 2026-04-18: 4.50:1 on --ps-cream via axe-core on live render.
       Previous value #C0541C scored only 3.87:1 — WCAG AA fail. */
    --ps-accent-on-cream:   #A0430F;
    /* Badge palette (shop OTC product cards) — soft tinted backgrounds. */
    --ps-badge-sale-bg:         #FFE0D6;
    --ps-badge-age-bg:          #FEF3C7;
    --ps-badge-age-text:        #92400E;
    --ps-badge-pickup-bg:       #FFF7ED;
    /* Soft error fill (error-state cards). Matches Tailwind red-100/red-300. */
    --ps-color-error-soft-bg:     #FEE2E2;
    --ps-color-error-soft-border: #FCA5A5;


    /* ── PS Shadows ── */
    --ps-shadow:       0 1px 2px rgba(15, 30, 28, 0.04), 0 8px 24px rgba(15, 30, 28, 0.06);
    --ps-shadow-lift:  0 2px 4px rgba(15, 30, 28, 0.04), 0 18px 40px rgba(15, 30, 28, 0.08);

    /* ── PS Typography ── */
    --ps-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --ps-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ────────────────────────────────────────────────────────────────────
       LEGACY (do not remove until every consumer is migrated to --ps-*)
       ──────────────────────────────────────────────────────────────────── */

    /* ── Colors: Primary ── */
    --color-primary: #0B7A75;
    --color-primary-dark: #005f5b;
    --color-primary-darker: #004a47;
    --color-primary-light: #19B5B1;
    --color-primary-tint: #F0FDFA;
    --color-primary-gradient: linear-gradient(135deg, #005f5b 0%, #0B7A75 100%);

    /* ── Colors: Secondary (Mint) ── */
    --color-secondary: #19B5B1;
    --color-secondary-dim: #53dad5;
    --color-secondary-container: #71f4ef;

    /* ── Colors: Accent (Coral — urgent CTAs only) ── */
    --color-accent: #FF6B35;
    --color-accent-dark: #c34008;
    --color-accent-container: #ffdbd0;

    /* ── Colors: Surfaces (Tonal Layering) ── */
    --color-surface: #f9f9ff;
    --color-surface-low: #f0f3ff;
    --color-surface-high: #dfe8fd;
    --color-surface-highest: #dae3f7;
    --color-surface-white: #ffffff;
    /* --color-bg removed — use --color-surface instead */

    /* ── Colors: Dark (Navy) ── */
    --color-dark: #1A2332;
    --color-dark-surface: #283140;
    --color-dark-muted: #C9D1D9;

    /* ── Colors: Text ── */
    --color-text: #131c2a;
    --color-text-secondary: #64748B;
    --color-text-muted: #5c6766;
    --color-text-on-primary: #ffffff;
    --color-text-on-dark: #ecf1ff;
    --color-text-on-dark-muted: #C9D1D9;

    /* ── Colors: Semantic ──
       Unified canonical values across PatientApp, StaffPortal, and Website.
       Source of truth: memory/project_design_token_unification.md
       Do not diverge these without updating all three apps. */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-error: #dc2626;
    --color-error-container: #ffdad6;
    --color-warning: #B45309;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-info: #2563EB;
    --color-info-bg: #DBEAFE;

    /* ── Colors: Outline & Border ── */
    --color-outline: #6e7978;
    --color-outline-variant: #bdc9c7;
    --color-border: rgba(189, 201, 199, 0.25);
    --color-border-subtle: rgba(189, 201, 199, 0.08);

    /* ── Colors: Badges ── */
    --color-badge-blue-bg: #DBEAFE;
    --color-badge-blue-text: #1E40AF;
    --color-badge-green-bg: #D1FAE5;
    --color-badge-green-text: #065F46;
    --color-badge-teal-bg: #E6FFFA;
    --color-badge-teal-text: #134E4A;
    --color-cart-badge: #C2410C;

    /* ── Typography ── */
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type Scale (fluid with clamp) */
    --text-display: clamp(2.5rem, 5vw, 3.5rem);     /* 40-56px */
    --text-h1: clamp(2rem, 4vw, 3rem);               /* 32-48px */
    --text-h2: clamp(1.5rem, 3vw, 2.25rem);           /* 24-36px */
    --text-h3: clamp(1.25rem, 2vw, 1.5rem);           /* 20-24px */
    --text-h4: 1.125rem;                               /* 18px */
    --text-body: 1rem;                                 /* 16px */
    --text-body-sm: 0.875rem;                          /* 14px — minimum for functional text */
    --text-caption: 0.8125rem;                         /* 13px — decorative only */
    --text-label: 0.75rem;                             /* 12px — labels only, never body text */

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.05em;

    /* ── Spacing (8px grid) ── */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Section spacing */
    --section-gap: var(--space-16);         /* 64px mobile */
    --section-gap-lg: var(--space-24);      /* 96px desktop */

    /* ── Radii ── */
    --radius-xs: 4px;
    --radius-sm: 8px;       /* base roundness */
    --radius-md: 8px;        /* standard elements (unified) */
    --radius-lg: 12px;      /* cards (unified) */
    --radius-xl: 1.5rem;    /* buttons, prominent cards */
    --radius-pill: 9999px;
    --radius-input: 10px;

    /* ── Shadows (tinted, not pure black) ── */
    --shadow-sm: 0 1px 3px rgba(19, 28, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(19, 28, 42, 0.06);
    --shadow-lg: 0 10px 30px rgba(19, 28, 42, 0.06);
    --shadow-xl: 0 20px 40px rgba(19, 28, 42, 0.08);
    --shadow-glow: 0 0 20px rgba(11, 122, 117, 0.15);
    --shadow-card: 0 2px 8px rgba(19, 28, 42, 0.04), 0 8px 24px rgba(19, 28, 42, 0.04);
    --shadow-primary-sm: 0 2px 8px rgba(11, 122, 117, 0.2);
    --shadow-primary-md: 0 4px 14px rgba(11, 122, 117, 0.25);
    --shadow-primary-lg: 0 6px 20px rgba(11, 122, 117, 0.3);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(249, 249, 255, 0.8);
    --glass-blur: blur(16px);
    --glass-border: 1px solid rgba(189, 201, 199, 0.15);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --container-padding: var(--space-5);     /* 20px */
    --nav-height: 72px;

    /* ── Z-Index Scale ── */
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* ── Responsive token overrides ── */
@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-8);   /* 32px */
        --section-gap: var(--space-20);         /* 80px */
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-10);   /* 40px */
        --section-gap: var(--space-24);         /* 96px */
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-spring: 0ms;
    }
}