/*
 * tokens.css: every design value PONPACK shares with traded.gg, plus the green
 * accent that replaces traded's blue. Neutrals, radii, shadows and motion are
 * traded's measured values (reference/spec/chrome.md 3.12 and 5).
 * Never hard-code a colour in page CSS when a token here names it.
 */
:root {
  /* surfaces */
  --bg: #0a0a0a;                 /* body, header base, nav drawer, footer */
  --fg: #ffffff;                 /* primary text */
  --card: #141414;               /* cards, basket panel, menus */
  --secondary: #1f1f1f;          /* announcement bar, inputs, hover fills, skeleton */
  --accent-hover: #292929;       /* icon button hover (traded "accent") */
  --border: #262626;             /* every hairline */
  --input: #262626;
  --sidebar: #0d0d0d;
  --muted: #a1a1a1;              /* secondary text, inactive nav (7.66:1 on bg) */
  --muted-80: rgba(161, 161, 161, 0.8);   /* small muted text that must pass AA (5.22:1) */
  --muted-40: rgba(161, 161, 161, 0.4);
  --muted-50: rgba(161, 161, 161, 0.5);
  --destructive: #cf3030;
  --destructive-10: rgba(207, 48, 48, 0.1);
  --destructive-50: rgba(207, 48, 48, 0.5);
  --red-400: #f87171;

  /* PONPACK green (replaces traded blue #3c83f6 and its highlight/active states) */
  --accent: #1f9d5a;             /* 5.68:1 on bg; borders, events dot core */
  --accent-strong: #157848;      /* selected fills (never text: 3.59:1) */
  --accent-bright: #2fbf73;      /* text and icons on dark, focus ring (8.32:1) */
  --accent-soft: rgba(42, 158, 101, 0.14);
  --accent-nav: rgba(42, 158, 101, 0.16);   /* active nav pill */
  --accent-deep: #01331d;
  --accent-highlight: #8bc4a5;
  --on-accent-bright: #04130b;   /* dark text on #2fbf73 */
  --ring: #2fbf73;
  --primary: #2fbf73;            /* text-primary links */

  /* deal and rarity colours stay traded's */
  --deal-good: #21c45d;
  --deal-bad: #cf3030;
  --emerald-400: #00d294;
  --emerald-500: #00bb7f;
  --sky-400: #00bcfe;

  /* foreground alpha steps actually used by traded */
  --fg-3: rgba(255, 255, 255, 0.03);
  --fg-5: rgba(255, 255, 255, 0.05);
  --fg-6: rgba(255, 255, 255, 0.06);
  --fg-7: rgba(255, 255, 255, 0.07);
  --fg-10: rgba(255, 255, 255, 0.1);
  --fg-15: rgba(255, 255, 255, 0.15);
  --fg-20: rgba(255, 255, 255, 0.2);
  --fg-25: rgba(255, 255, 255, 0.25);
  --fg-28: rgba(255, 255, 255, 0.28);
  --fg-30: rgba(255, 255, 255, 0.3);
  --fg-40: rgba(255, 255, 255, 0.4);
  --fg-50: rgba(255, 255, 255, 0.5);
  --fg-60: rgba(255, 255, 255, 0.6);
  --fg-65: rgba(255, 255, 255, 0.65);
  --fg-70: rgba(255, 255, 255, 0.7);
  --fg-80: rgba(255, 255, 255, 0.8);
  --fg-85: rgba(255, 255, 255, 0.85);
  --bg-95: rgba(10, 10, 10, 0.95);
  --bg-60: rgba(10, 10, 10, 0.6);
  --bg-40: rgba(10, 10, 10, 0.4);
  --bg-15: rgba(10, 10, 10, 0.15);
  --card-80: rgba(20, 20, 20, 0.8);
  --secondary-60: rgba(31, 31, 31, 0.6);
  --secondary-40: rgba(31, 31, 31, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-75: rgba(0, 0, 0, 0.75);
  --black-85: rgba(0, 0, 0, 0.85);
  --tooltip-bg: #0b0f14;
  --toast-bg: rgba(17, 23, 19, 0.98);

  /* radii */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-control: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-surface: 16px;
  --radius-modal: 24px;
  --radius-pill: 9999px;

  /* shadows */
  --shadow-fill: inset 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  --shadow-fill-hover: inset 0 1px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 22px -8px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg-black: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-outline: inset 0 0 0 1px var(--border);
  --shadow-outline-hover: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --shadow-secondary: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px var(--border);
  --shadow-card-hover: 0 0 14px -2px rgba(255, 255, 255, 0.18);
  --shadow-toast: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 8px 36px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring);

  /* easing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);          /* default colour transitions */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* nav drawer, progress bar */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);   /* basket, badge, menus, toasts, buy bar */
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);

  /* durations */
  --dur-fast: 150ms;
  --dur-menu-in: 160ms;
  --dur-menu-out: 120ms;
  --dur-fade: 180ms;
  --dur-overlay: 200ms;
  --dur-modal: 220ms;
  --dur-nav: 260ms;
  --dur-buybar: 300ms;
  --dur-basket-overlay: 300ms;
  --dur-basket: 320ms;
  --dur-badge: 380ms;

  /* z-index */
  --z-fab: 30;
  --z-header: 40;
  --z-drawer: 50;
  --z-menu: 50;
  --z-modal: 60;
  --z-tooltip: 70;
  --z-toast: 200;
  --z-progress: 2000;

  /* layout */
  --header-h: 3.5rem;            /* shell.js writes the sticky block's real height */
  --header-bar-h: 56px;
  --container-wide: 1400px;      /* home sections, market */
  --container-7xl: 1280px;       /* footer, legal, packs */
  --container-6xl: 1152px;       /* item page */
  --basket-w: 440px;

  /* type */
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}