/* ============================================================
   MyGemMart design tokens — "The Trading Floor"
   WGWS §02: pure CSS custom properties, no build step.
   Canonical source. Pages/components reference SEMANTIC tokens only;
   primitives are ramp values, never used directly in components.

   USAGE LAW (binding, per CEO direction):
   1. Ruby = primary trading actions (Buy Now, Make Offer, Accept Offer,
      Confirm Order, Place Bid) + errors/declined/destructive. Nothing else.
   2. Gold = hairlines, badge outlines, champagne numerals on navy.
      Never a fill, never a gradient. Max two gold moments per viewport.
   3. Gradients are banned except the skeleton shimmer (.skel) and image
      scrims. No glow shadows.
   4. All measured pairs in DESIGN.md §2.3 meet WCAG 2.2 AA.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Primitives: navy (base) ---------- */
  --navy-950: #0A1322;
  --navy-900: #0F1D33;
  --navy-800: #152742;
  --navy-700: #1B3358;
  --navy-600: #224470;
  --navy-500: #2C558F;
  --navy-400: #4F76AE;
  --navy-300: #7E97C4;
  --navy-200: #B1C1DC;
  --navy-100: #DAE2EF;
  --navy-50:  #EFF3F9;

  /* ---------- Primitives: ruby (action + danger) ---------- */
  --ruby-800: #8C0C30;
  --ruby-700: #9C0E34;
  --ruby-600: #BC1343;  /* PRIMARY ACTION — white text = 6.34:1 */
  --ruby-500: #CE2B57;
  --ruby-tint: #FBE7ED;
  --ruby-tint-strong: #F4CDD9;

  /* ---------- Primitives: gold (champagne accent) ---------- */
  --gold-800: #6B5316;  /* Certified badge text (6.59:1 on gold-tint) */
  --gold-700: #8A6A1F;  /* caps labels on light (5.04:1) — label sizes only */
  --gold-600: #A5822E;  /* meaningful gold edges (3.60:1 boundary) */
  --gold-500: #C2A04A;  /* DECORATIVE hairlines only (2.49:1) + numerals on navy */
  --gold-400: #D4B968;  /* on navy only */
  --gold-300: #E6D19B;  /* accent text on navy (11.22:1) */
  --gold-200: #F0E4C3;
  --gold-tint: #F9F3E2;

  /* ---------- Primitives: ink (text) ---------- */
  --ink-900: #1A2333;
  --ink-700: #414D63;
  --ink-500: #5C6A84;

  /* ---------- Primitives: status ---------- */
  --green-700: #1D6A41;
  --green-600: #1F7A48;
  --green-tint: #E3F2E9;
  --amber-800: #6E4A00;
  --amber-tint: #FBF1DC;

  /* ---------- Semantic: surfaces ---------- */
  --bg-page: #FAF8F3;            /* warm white */
  --surface: #FFFFFF;
  --surface-sand: #F4EFE6;
  --surface-navy-tint: #EFF3F9;
  --surface-gold-tint: #F9F3E2;
  --surface-green-tint: #E3F2E9;
  --surface-ruby-tint: #FBE7ED;
  --surface-disabled: #EDEAE1;
  --surface-dark: var(--navy-900);
  --surface-darker: var(--navy-950);

  /* ---------- Semantic: text ---------- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-caption: var(--ink-500);
  --text-inverse: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: var(--navy-200);
  --text-accent-dark: var(--gold-300);   /* accent on navy surfaces */
  --text-link: var(--navy-600);
  --text-link-hover: var(--navy-700);
  --text-error: var(--ruby-700);
  --text-success: var(--green-700);
  --text-warning: var(--amber-800);

  /* ---------- Semantic: action colors ---------- */
  --action-primary-bg: var(--ruby-600);        /* Buy Now / Make Offer ONLY */
  --action-primary-bg-hover: var(--ruby-700);
  --action-primary-bg-active: var(--ruby-800);
  --action-secondary-bg: var(--navy-700);
  --action-secondary-bg-hover: var(--navy-800);
  --action-secondary-bg-active: var(--navy-900);

  /* ---------- Semantic: borders ---------- */
  --border-hairline: #E5DFD2;   /* decorative rules on warm/white */
  --border-cool: #D9E0EB;       /* rules inside navy-tint surfaces */
  --border-input: #7E8AA0;      /* control edges — 3.48:1 (WCAG 1.4.11) */
  --border-strong: var(--navy-700);
  --border-gold: var(--gold-600); /* meaningful gold edge (Certified badge) */
  --border-gold-decorative: var(--gold-500);

  /* ---------- Focus (never remove) ---------- */
  --focus-ring: var(--navy-700);          /* on light surfaces */
  --focus-ring-on-dark: var(--gold-300);  /* on navy surfaces */
  --focus-offset: 2px;

  /* ---------- Shadows (restrained; no colored glow) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 29, 51, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 29, 51, 0.06);
  --shadow-md: 0 8px 20px rgba(15, 29, 51, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 29, 51, 0.10);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;    /* buttons, inputs, chips, menu items */
  --radius-md: 10px;   /* card media, toasts, popovers, sheets */
  --radius-lg: 12px;   /* cards, panels, thread bubbles */
  --radius-xl: 16px;   /* modals, hero tray */
  --radius-pill: 999px; /* badges ONLY */

  /* ---------- Spacing (4pt base) ---------- */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Typography ---------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-display: clamp(36px, 4.8vw, 58px);
  --fs-h1: clamp(30px, 3.4vw, 40px);
  --fs-h2: clamp(24px, 2.6vw, 30px);
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-lede: 18.5px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-label: 11px;
  --fs-price-xl: 28px;
  --fs-price: 19px;
  --fs-data: 13px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --lh-ui: 1.5;

  --tracking-caps: 0.12em;
  --tracking-heading: -0.01em;
  --tracking-display: -0.015em;

  --numerals-tabular: tabular-nums; /* apply to ALL changing numbers */

  /* ---------- Layout ---------- */
  --container-content: 1160px;
  --container-marketplace: 1280px;
  --container-dashboard: 1440px;
  --sidebar-width: 248px;
  --filters-width: 280px;
  --threads-width: 340px;
  --header-height: 72px;
  --header-height-mobile: 60px;
  --bottom-nav-height: 56px;
  --grid-gutter: 24px;
  --grid-gutter-mobile: 16px;
  /* Breakpoints (documentation — use in media queries, not var()):
     480 · 640 · 768 · 1024 · 1280 · 1440 · 1600 · 1920 */

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 110;
  --z-bottom-nav: 120;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---------- Motion (see DESIGN.md §8 — small, purposeful) ---------- */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion is non-negotiable (DESIGN.md §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}