/* WikiPons v3 tokens: primitive, then semantic, then component. Direction in DESIGN.md. */

/* === PRIMITIVES === */
:root {
  --p-bg: #0B0B0D;
  --p-panel: #131316;
  --p-panel-2: #1A1A1F;
  --p-panel-3: #222228;
  --p-text: #F5F5F7;
  --p-text-2: #A1A1AA;
  --p-text-3: #6B6B75;
  --p-blue: #3A4CFF;
  --p-blue-hi: #5566FF;
  --p-red: #FF4A2B;
  --p-lime: #E3F36B;
  --p-good: #3FD98A;
  --p-bad: #FF5A4A;

  --p-r0: #A3A8B8;
  --p-r1: #39D98A;
  --p-r2: #2EA8FF;
  --p-r3: #A55CFF;
  --p-r4: #FF6A2B;
  --p-r5: #FFFFFF;

  --p-font: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --p-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --p-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* === SEMANTIC === */
:root {
  --bg: var(--p-bg);
  --panel: var(--p-panel);
  --panel-2: var(--p-panel-2);
  --panel-3: var(--p-panel-3);
  --text: var(--p-text);
  --text-2: var(--p-text-2);
  --text-3: var(--p-text-3);
  --accent: var(--p-blue);
  --accent-hi: var(--p-blue-hi);
  --commerce: var(--p-red);
  --signal: var(--p-lime);
  --good: var(--p-good);
  --bad: var(--p-bad);
  --line: rgba(255, 255, 255, 0.07);

  /* rarity metals: the frame and the badge of each card */
  --metal-0: linear-gradient(150deg, #E4E6EE 0%, #8C91A6 30%, #D2D5E0 52%, #5F6478 78%, #B9BDCB 100%);
  --metal-1: linear-gradient(150deg, #C8FFE0 0%, #1FB86C 32%, #8CF2BD 54%, #0E7F47 80%, #5BE3A0 100%);
  --metal-2: linear-gradient(150deg, #CBEBFF 0%, #1C8BE0 32%, #8DD2FF 54%, #0B5DB0 80%, #58B8FF 100%);
  --metal-3: linear-gradient(150deg, #E6D4FF 0%, #7E35E8 32%, #C9A2FF 54%, #5718B8 80%, #A873FF 100%);
  --metal-4: linear-gradient(150deg, #FFD9C9 0%, #F04A12 32%, #FFA07A 54%, #B42A05 80%, #FF7440 100%);
  --metal-5: conic-gradient(from var(--foil, 210deg) at 50% 50%, #3A4CFF, #9AA5FF, #FFFFFF, #FFC2B3, #FF4A2B, #FFFFFF, #7482FF, #3A4CFF);
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #E3E6F2 38%, #9CA2BF 50%, #C9CDDF 64%, #F3F4FA 100%);
}

/* === COMPONENT === */
:root {
  --topbar-h: 64px;
  --rail-w: 244px;
  --radius-tile: 18px;
  --radius-panel: 16px;
  --card-radius: 12px;
  /* one content edge for every page of the rail, so the right edge never jumps between them */
  --page-max: 1280px;
}

/* === v9 SYSTEM ADDITIONS (spec 7.1) === */
:root {
  /* spacing, 4px base */
  --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;
  /* type scale (--t-micro is for legal credits only) */
  --t-hero: clamp(54px, 5.7vw, 94px); --t-page: 40px; --t-shop: 56px; --t-row: 28px; --t-card: 22px; --t-body: 15px; --t-small: 13px; --t-micro: 11px;
  /* radii: 6 tags, 10 inputs and rows, 12 the card, 16 panels and tiles, 22 banners and sheet tops, 999 pills */
  --r-tag: 6px; --r-row: 10px; --r-tile: 16px; --r-banner: 22px; --r-pill: 999px;
  /* surfaces: L0 page, L1 panel, L2 rows and inputs, L3 hover and selected, overlay for menus and sheets */
  --overlay: #17171B; --border: rgba(255,255,255,.07); --border-hi: rgba(255,255,255,.11); --border-act: rgba(255,255,255,.18);
  --shadow-pop: 0 24px 64px -12px rgba(0,0,0,.6);
  /* money and new metals */
  --gold: linear-gradient(150deg, #FFF3C8 0%, #D5A240 20%, #FFF8E0 38%, #B8852B 58%, #FFE6A0 78%, #C69535 100%);
  --metal-lime: linear-gradient(150deg, #F6FBD2 0%, #B8C84A 32%, #EEF6B0 54%, #8FA02A 80%, #D9E77A 100%);
  --metal-crimson: linear-gradient(150deg, #FFD2C8 0%, #C8321A 32%, #FF8A70 54%, #86170A 80%, #F0553A 100%);
}
/* contrast fix: --text-3 passes 4.5:1 on the panel color */
:root { --p-text-3: #80808B; }