/* =============================================================================
   PharmacyAI — Design Tokens
   src/styles/tokens.css
   VERSION: 2
   FROZEN — read CLAUDE.md § Frozen Files before modifying.
   Source of truth for all design values. Import before all other stylesheets.

   Changelog:
   v2 (2026-05-14): Added --pa-border-on-light semantic alias for subtle
     borders on light surfaces (denim @ 15%). Used by homepage body
     sections per build prompt 04.
   v1 (2026-05-14): Initial placement during bootstrap.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COLOR — BASE PALETTE
     From brand style guide, April 2026
  --------------------------------------------------------------------------- */

  /* Structural darks */
  --pa-color-onyx:       #060B12;   /* reserved / unassigned */
  --pa-color-midnight:   #14202E;   /* primary dark background */
  --pa-color-denim:      #2D3E51;   /* buttons, section backgrounds */
  --pa-color-sky:        #8FA3B8;   /* subdued text, disabled states */

  /* Light / surface */
  --pa-color-bone:       #F4EFE6;   /* light text, light backgrounds */

  /* Accent */
  --pa-color-mint:       #83BC78;   /* accents, underlines, strokes, boxes */

  /* Gradient — used for underlines, strokes, boxes, accents */
  --pa-color-gradient:   linear-gradient(135deg, #83BC78 0%, #F4A94E 100%);
  /* Individual gradient stops for programmatic use */
  --pa-color-gradient-start: #83BC78;
  --pa-color-gradient-end:   #F4A94E;

  /* ---------------------------------------------------------------------------
     COLOR — VARIABLE PALETTE
     Contextual / thematic use — currently unassigned, use with intention
  --------------------------------------------------------------------------- */

  --pa-color-jade:       #3DBE9A;   /* unassigned — potential financial positive */
  --pa-color-sun:        #1F4B74;   /* unassigned — potential data/chart accent */
  --pa-color-ember:      #F26B4E;   /* unassigned — potential warning / alert */

  /* ---------------------------------------------------------------------------
     COLOR — SEMANTIC ALIASES
     Assign base palette to roles. Change role here; everything updates.
  --------------------------------------------------------------------------- */

  /* Backgrounds */
  --pa-bg-primary:       var(--pa-color-midnight);
  --pa-bg-secondary:     var(--pa-color-denim);
  --pa-bg-surface:       var(--pa-color-bone);
  --pa-bg-overlay:       rgba(20, 32, 46, 0.92);

  /* Text */
  --pa-text-primary:     var(--pa-color-bone);
  --pa-text-secondary:   var(--pa-color-sky);
  --pa-text-disabled:    var(--pa-color-sky);
  --pa-text-on-light:    var(--pa-color-midnight);
  --pa-text-accent:      var(--pa-color-mint);

  /* Borders / strokes */
  --pa-border-default:   var(--pa-color-denim);
  --pa-border-subtle:    rgba(143, 163, 184, 0.2);  /* sky at 20% */
  --pa-border-accent:    var(--pa-color-mint);
  --pa-border-on-light:  rgba(45, 62, 81, 0.15);    /* v2 — denim at 15%, for light surfaces */

  /* Interactive */
  --pa-interactive-default:  var(--pa-color-denim);
  --pa-interactive-hover:    color-mix(in srgb, var(--pa-color-denim) 80%, white);
  --pa-interactive-active:   var(--pa-color-mint);
  --pa-interactive-focus:    var(--pa-color-mint);

  /* Status — map to brand colors or variable palette as product matures */
  --pa-status-success:   var(--pa-color-jade);
  --pa-status-warning:   var(--pa-color-sun);
  --pa-status-error:     var(--pa-color-ember);
  --pa-status-info:      var(--pa-color-sky);

  /* IQR classification — inventory quality states */
  --pa-iqr-nm:    #8B3030;   /* Non-moving */
  --pa-iqr-sm:    #8B6830;   /* Slow-moving */
  --pa-iqr-e1:    #4A6B3A;   /* Excess tier 1 */
  --pa-iqr-e2:    #3A5A2A;   /* Excess tier 2 */
  --pa-iqr-e3:    #2A4A1A;   /* Excess tier 3 */
  --pa-iqr-a1:    var(--pa-color-mint);  /* Active */
  --pa-iqr-a2:    var(--pa-color-jade);  /* Active+ */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — FONT FAMILIES
  --------------------------------------------------------------------------- */

  --pa-font-sans:   'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --pa-font-mono:   'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --pa-font-serif:  'Playfair Display', 'Georgia', serif;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — SCALE
     Matches style guide exactly. All sizes in rem (base 16px).
  --------------------------------------------------------------------------- */

  /* Headings — Geist Bold, letter-spacing -5% */
  --pa-h1-size:     4rem;       /* 64px */
  --pa-h1-weight:   700;
  --pa-h1-leading:  1;
  --pa-h1-tracking: -0.05em;

  --pa-h2-size:     2.75rem;    /* 44px */
  --pa-h2-weight:   700;
  --pa-h2-leading:  1;
  --pa-h2-tracking: -0.05em;

  --pa-h3-size:     1.875rem;   /* 30px */
  --pa-h3-weight:   700;
  --pa-h3-leading:  1;
  --pa-h3-tracking: -0.05em;

  /* Serif headings — Playfair Display Italic, letter-spacing -5% */
  --pa-h-serif-lg-size:     4rem;      /* 64px */
  --pa-h-serif-lg-weight:   400;       /* italic, not bold */
  --pa-h-serif-lg-style:    italic;
  --pa-h-serif-lg-leading:  1;
  --pa-h-serif-lg-tracking: -0.05em;

  --pa-h-serif-reg-size:    2.75rem;   /* 44px */
  --pa-h-serif-reg-weight:  400;
  --pa-h-serif-reg-style:   italic;
  --pa-h-serif-reg-leading: 1;
  --pa-h-serif-reg-tracking:-0.05em;

  --pa-h-serif-sm-size:     1.875rem;  /* 30px */
  --pa-h-serif-sm-weight:   400;
  --pa-h-serif-sm-style:    italic;
  --pa-h-serif-sm-leading:  1;
  --pa-h-serif-sm-tracking: -0.05em;

  /* Labels — Geist Mono, UPPERCASE, letter-spacing 0% */
  --pa-h4-size:     1.125rem;   /* 18px */
  --pa-h4-weight:   500;        /* Mono Medium */
  --pa-h4-leading:  1;
  --pa-h4-tracking: 0em;
  --pa-h4-transform:uppercase;

  --pa-h5-size:     1.125rem;   /* 18px */
  --pa-h5-weight:   400;        /* Mono Regular */
  --pa-h5-leading:  1;
  --pa-h5-tracking: 0em;
  --pa-h5-transform:uppercase;

  /* Body — Geist Regular, letter-spacing -5% */
  --pa-body-lg-size:    1.25rem;  /* 20px */
  --pa-body-lg-weight:  400;
  --pa-body-lg-leading: 1.1;
  --pa-body-lg-tracking:-0.05em;

  --pa-body-reg-size:    1rem;    /* 16px */
  --pa-body-reg-weight:  400;
  --pa-body-reg-leading: 1.1;
  --pa-body-reg-tracking:-0.05em;

  --pa-body-sm-size:    0.875rem; /* 14px */
  --pa-body-sm-weight:  400;
  --pa-body-sm-leading: 1.1;
  --pa-body-sm-tracking:-0.05em;

  /* Body Serif — Playfair Display Italic, letter-spacing -5% */
  --pa-body-serif-lg-size:    1.25rem;
  --pa-body-serif-lg-weight:  400;
  --pa-body-serif-lg-style:   italic;
  --pa-body-serif-lg-leading: 1.1;
  --pa-body-serif-lg-tracking:-0.05em;

  --pa-body-serif-reg-size:    1rem;
  --pa-body-serif-reg-weight:  400;
  --pa-body-serif-reg-style:   italic;
  --pa-body-serif-reg-leading: 1.1;
  --pa-body-serif-reg-tracking:-0.05em;

  --pa-body-serif-sm-size:    0.875rem;
  --pa-body-serif-sm-weight:  400;
  --pa-body-serif-sm-style:   italic;
  --pa-body-serif-sm-leading: 1.1;
  --pa-body-serif-sm-tracking:-0.05em;

  /* Labels — Geist Mono, UPPERCASE */
  --pa-label-reg-size:    0.875rem;  /* 14px */
  --pa-label-reg-weight:  400;
  --pa-label-reg-leading: 1.1;
  --pa-label-reg-tracking:0em;
  --pa-label-reg-transform:uppercase;

  --pa-label-button-size:    0.875rem;
  --pa-label-button-weight:  500;
  --pa-label-button-leading: 1.1;
  --pa-label-button-tracking:0em;
  --pa-label-button-transform:uppercase;

  --pa-label-lg-size:    1.125rem;  /* 18px */
  --pa-label-lg-weight:  400;
  --pa-label-lg-leading: 1.1;
  --pa-label-lg-tracking:0em;
  --pa-label-lg-transform:uppercase;

  --pa-label-button-lg-size:    1.125rem;
  --pa-label-button-lg-weight:  500;
  --pa-label-button-lg-leading: 1.1;
  --pa-label-button-lg-tracking:0em;
  --pa-label-button-lg-transform:uppercase;

  --pa-label-legal-size:    0.75rem;  /* 12px */
  --pa-label-legal-weight:  400;
  --pa-label-legal-leading: 1.1;
  --pa-label-legal-tracking:0em;
  --pa-label-legal-transform:uppercase;

  --pa-label-legal-bold-size:    0.75rem;
  --pa-label-legal-bold-weight:  500;
  --pa-label-legal-bold-leading: 1.1;
  --pa-label-legal-bold-tracking:0em;
  --pa-label-legal-bold-transform:uppercase;

  /* ---------------------------------------------------------------------------
     SPACING — 4px base grid
  --------------------------------------------------------------------------- */

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

  /* Layout */
  --pa-container-max: 1200px;
  --pa-container-pad: var(--pa-space-6);  /* 24px sides on desktop */
  --pa-container-pad-mobile: var(--pa-space-4);

  /* ---------------------------------------------------------------------------
     BORDER RADIUS
  --------------------------------------------------------------------------- */

  --pa-radius-sm:   2px;   /* brand uses sharp/editorial corners */
  --pa-radius-md:   4px;
  --pa-radius-lg:   8px;
  --pa-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     SHADOWS
  --------------------------------------------------------------------------- */

  --pa-shadow-sm:  0 1px 4px rgba(6, 11, 18, 0.3);
  --pa-shadow-md:  0 4px 16px rgba(6, 11, 18, 0.4);
  --pa-shadow-lg:  0 16px 48px rgba(6, 11, 18, 0.5);
  --pa-shadow-xl:  0 24px 64px rgba(6, 11, 18, 0.6);

  /* ---------------------------------------------------------------------------
     TRANSITIONS
  --------------------------------------------------------------------------- */

  --pa-transition-fast:   100ms ease;
  --pa-transition-base:   150ms ease;
  --pa-transition-slow:   250ms ease;

  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
  --------------------------------------------------------------------------- */

  --pa-z-base:    0;
  --pa-z-raised:  10;
  --pa-z-dropdown:200;
  --pa-z-sticky:  300;
  --pa-z-modal:   400;
  --pa-z-toast:   500;

}