/* ─────────────────────────────────────────────────────────────
   glp1.party // Swiss Clinical Design Tokens & Design System
   Enterprise Precision · Strict 8px Rhythm · Tabular Numeral Align
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── 8px Strict Spatial Rhythm Scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Canvas & Surface Tiering ── */
  --canvas:           #f8fafc;
  --surface:          #ffffff;
  --surface-subtle:   #f1f5f9;
  --surface-raised:   #e2e8f0;
  --surface-overlay:  rgba(15, 23, 42, 0.48);

  /* ── Architectural Borders ── */
  --border-subtle:    #f1f5f9;
  --border:           #e2e8f0;
  --border-hover:     #cbd5e1;
  --border-focus:     #e11d48;
  --border-strong:    #94a3b8;

  /* ── Typographic Ink ── */
  --text-primary:     #0f172a;
  --text-secondary:   #334155;
  --text-muted:       #64748b;
  --text-subtle:      #94a3b8;
  --text-inverse:     #ffffff;

  /* ── Clinical Laboratory Rose Brand Identity ── */
  --pink:               #e11d48;
  --pink-hover:         #be185d;
  --pink-active:        #9f1239;
  --pink-bg:            #fff1f2;
  --pink-border:        #fecdd3;
  --pink-ring:          rgba(225, 29, 72, 0.20);
  --accent-pink:        #e11d48;
  --accent-pink-hover:  #be185d;

  /* ── Status Semantics ── */
  --status-emerald:        #059669;
  --status-emerald-hover:  #047857;
  --status-emerald-bg:     #ecfdf5;
  --status-emerald-border: #a7f3d0;
  --status-emerald-text:   #065f46;
  --status-emerald-dot:    #10b981;

  --status-amber-bg:       #fffbeb;
  --status-amber-border:   #fde68a;
  --status-amber-text:     #92400e;
  --status-amber-dot:      #f59e0b;

  --status-rose-bg:        #fef2f2;
  --status-rose-border:    #fecaca;
  --status-rose-text:      #991b1b;
  --status-rose-dot:       #ef4444;

  --status-indigo-bg:      #eef2ff;
  --status-indigo-border:  #c7d2fe;
  --status-indigo-text:    #3730a3;
  --status-indigo-dot:     #6366f1;

  --status-sky-bg:         #f0f9ff;
  --status-sky-border:     #bae6fd;
  --status-sky-text:       #0369a1;
  --status-sky-dot:        #0284c7;

  /* ── Form Component Heights & Sizing ── */
  --input-height-sm:   32px;
  --input-height-md:   40px;
  --input-height-lg:   48px;
  
  --input-qty-width:   96px;
  --input-zip-width:   120px;
  --input-cur-width:   130px;

  /* ── Typographic Scale ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', 'Space Mono', 'Courier New', monospace;

  --font-2xs:  10px;
  --font-xs:   11.5px;
  --font-sm:   13px;
  --font-base: 14px;
  --font-md:   16px;
  --font-lg:   18px;
  --font-xl:   22px;
  --font-2xl:  28px;
  --font-3xl:  36px;

  /* ── Radii ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Elevation Shadows ── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12);

  /* ── Transitions ── */
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}