/* ==========================================================================
   IPMCKart Merchant Design System — Tokens
   Root variables and design system primitives for all merchant surfaces.
   ========================================================================== */

:root {
  /* --- Colors: Ink Neutrals --- */
  --ink: #16191d;
  --ink-2: #2a2f36;
  --ink-3: #444b54;
  --muted: #5c6570;
  --muted-2: #8a929b;
  --muted-3: #b3b9c0;
  --canvas: #f5f4f2;
  --canvas-2: #efedea;
  --surface: #ffffff;
  --surface-2: #fbfaf9;
  --overlay: rgba(22, 25, 29, 0.44);

  /* --- Colors: Lines & Borders --- */
  --line: #e4e6e8;
  --line-soft: #eef0f1;
  --line-strong: #d3d7db;

  /* --- Colors: Accent Red --- */
  --accent: #e30613;
  --accent-ink: #c0050f;
  --accent-dark: #b4000b;
  --accent-soft: #fdebec;
  --accent-ring: rgba(227, 6, 19, 0.14);

  /* --- Colors: Semantic Tones --- */
  --green: #147a4a;
  --green-soft: #e7f3ec;
  --green-ink: #0f5c37;
  --gold: #a76800;
  --gold-soft: #fbf1df;
  --gold-ink: #855300;
  --blue: #1a5fb4;
  --blue-soft: #e9f0fa;
  --blue-ink: #164e93;
  --quiet: #5c6570;
  --quiet-soft: #eceef0;

  /* --- Typography: Families --- */
  --font-sys: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Condensed', 'Instrument Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Typography: Font Scale --- */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-52: 3.25rem;

  /* --- Typography: Line Heights & Tracking --- */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.75;
  --tracking-tight: -0.02em;
  --tracking-flat: 0;
  --tracking-wide: 0.01em;

  /* --- Space Grid & Structural Layout --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-28: 112px;

  --page-pad: var(--s-6);
  --card-pad: var(--s-6);
  --stack: var(--s-6);
  --section: var(--s-16);

  /* --- Radii --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Elevation & Shadows --- */
  --e-1: 0 1px 2px rgba(22, 25, 29, 0.04), 0 0 0 1px var(--line);
  --e-2: 0 4px 12px rgba(22, 25, 29, 0.05), 0 0 0 1px var(--line);
  --e-3: 0 12px 28px rgba(22, 25, 29, 0.07), 0 0 0 1px var(--line);
  --e-4: 0 24px 60px rgba(22, 25, 29, 0.10), 0 0 0 1px var(--line);

  /* --- Focus Rings --- */
  --ring: 0 0 0 3px var(--accent-ring);
  --ring-ink: 0 0 0 3px rgba(22, 25, 29, 0.12);

  /* --- Motion & Transitions --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* --- Z-Index Stack --- */
  --z-base: 0;
  --z-sticky: 10;
  --z-nav: 20;
  --z-drawer: 30;
  --z-scrim: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* --- Compact Density Mode --- */
[data-density="compact"] {
  --page-pad: var(--s-4);
  --card-pad: var(--s-4);
  --stack: var(--s-4);
  --section: var(--s-8);
  --fs-15: var(--fs-14);
  --r-md: 10px;
  --r-lg: 14px;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}