/* PP2 Game — Midnight Bazaar tokens.css — the single source of truth for colour, type, space,… */
:root {
  color-scheme: dark light;
  /* --- Ground & surfaces */
  --midnight: #0A1620;
  --midnight-2: #10222F;
  --panel: #16303F;
  --panel-2: #1D3D50;
  --lattice: rgba(230, 193, 109, .07);
  /* --- Metal & accent */
  --foil: #E6C16D;
  --foil-soft: rgba(230, 193, 109, .26);
  --foil-faint: rgba(230, 193, 109, .12);
  --marigold: #F5A524;
  --rose: #E85D75;
  --peacock: #19A9A6;
  --jade: #35C08A;
  --ember: #FF7043;
  /* --- Ink */
  --pearl: #F7F2E8;
  --pearl-soft: #B9C6CE;
  --pearl-dim: #96A5AF;
  /* --- Accent inks (text-safe variants of the accents) */
  --ink-marigold: #F5A524;
  --ink-peacock: #34C9C5;
  --ink-jade: #4FD6A0;
  --ink-rose: #F28094;
  --ink-ember: #FF8A5C;
  /* --- Derived: light, lines, veils */
  --foil-line: linear-gradient(90deg, transparent, var(--foil) 20%, var(--foil) 80%, transparent);
  --foil-line-soft: linear-gradient(90deg, transparent, var(--foil-soft) 20%, var(--foil-soft) 80%, transparent);
  --grad-cta: linear-gradient(118deg, var(--marigold), #FFCE6A 45%, var(--ember));
  --grad-lamp: radial-gradient(60% 70% at 50% 0%, rgba(245,165,36,.16), transparent 72%);
  --veil: rgba(6, 14, 20, .84);
  --hairline: 1px solid var(--foil-soft);
  --hairline-lit: 1px solid var(--foil);
  /* Jaali screen — hand-authored pointy-top honeycomb with six-point stars. */
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.5692' height='72' viewBox='0 0 41.5692 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M20.7846 36 0 24 0 0 20.7846-12'/%3E%3Cpath d='M62.3538 36 41.5692 24 41.5692 0 62.3538-12'/%3E%3Cpath d='M20.7846 108 0 96 0 72 20.7846 60'/%3E%3Cpath d='M41.5692 72 20.7846 60 20.7846 36 41.5692 24'/%3E%3Cpath d='M20.7846 6.5V17.5M25.548 9.25 16.022 14.75M16.022 9.25 25.548 14.75'/%3E%3Cpath d='M0 42.5V53.5M4.763 45.25-4.763 50.75M-4.763 45.25 4.763 50.75'/%3E%3Cpath d='M41.5692 42.5V53.5M46.332 45.25 36.806 50.75M36.806 45.25 46.332 50.75'/%3E%3C/g%3E%3C/svg%3E");
  --jaali-size: 41.5692px 72px;
  --fade-x: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  --scallop: radial-gradient(circle 9px at 50% 100%, transparent 7.2px, #000 7.3px, #000 8.2px, transparent 8.3px);
  /* Corner rosette — used as a mask so it can be recoloured on hover. */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M7 .6a6.4 6.4 0 1 1 0 12.8A6.4 6.4 0 0 1 7 .6Zm0 1a5.4 5.4 0 1 0 0 10.8A5.4 5.4 0 0 0 7 1.6Z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3Ccircle cx='7' cy='3.2' r='1.05'/%3E%3Ccircle cx='10.29' cy='5.1' r='1.05'/%3E%3Ccircle cx='10.29' cy='8.9' r='1.05'/%3E%3Ccircle cx='7' cy='10.8' r='1.05'/%3E%3Ccircle cx='3.71' cy='8.9' r='1.05'/%3E%3Ccircle cx='3.71' cy='5.1' r='1.05'/%3E%3C/svg%3E");
  /* --- Shadow */
  --lift-0: 0 1px 0 rgba(255,255,255,.06) inset;
  --lift-1: 0 14px 32px -20px rgba(3,10,16,.9), 0 1px 0 rgba(255,255,255,.06) inset;
  --lift-2: 0 24px 56px -26px rgba(3,10,16,.92), 0 1px 0 rgba(255,255,255,.06) inset;
  --lift-3: 0 38px 90px -34px rgba(3,10,16,.95), 0 1px 0 rgba(255,255,255,.07) inset;
  /* --- Radius */
  --arch: var(--arch-top) var(--arch-top) 14px 14px;
  --arch-top: 999px;
  /* clamped down at narrow widths */
  --arch-sm: 18px 18px 8px 8px;
  --arch-hero: 132px;
  /* game cards, list items */
  --r-input: 14px;
  --r-pill: 999px;
  --r-well: 12px 12px 6px 6px;
  /* --- Type */
  --font-display: "Marcellus", "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-h1: clamp(2.4rem, 5.6vw, 4.4rem);
  --t-h2: clamp(1.7rem, 3.2vw, 2.7rem);
  --t-h3: clamp(1.24rem, 1.9vw, 1.5rem);
  --t-h4: clamp(1.06rem, 1.4vw, 1.18rem);
  --t-lead: clamp(1.06rem, 1.5vw, 1.28rem);
  --t-body: 1.0625rem;
  /* 17px */
  --t-sm: .9375rem;
  --t-xs: .8125rem;
  --t-kicker: .75rem;
  --t-stat: clamp(1.9rem, 3.6vw, 2.9rem);
  --lh-tight: 1.16;
  --lh-snug: 1.35;
  --lh-body: 1.7;
  --track-display: -0.005em;
  --track-kicker: 0.18em;
  --measure: 68ch;
  /* --- Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 40px;
  --s-8: 54px;
  --s-9: 72px;
  --s-10: 96px;
  --gutter: clamp(18px, 4vw, 34px);
  --section: clamp(68px, 9vw, 128px);
  --container: 1200px;
  /* --- Easing & duration */
  --ease-arch: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-inout: cubic-bezier(.5, 0, .2, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 420ms;
  --d-wipe: 620ms;
  --tr-rim: border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
  --tr-panel: transform var(--d-base) var(--ease-arch), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out);
  /* --- Z ladder */
  --z-ambient: 0;
  --z-base: 1;
  --z-raised: 5;
  --z-sticky: 50;
  --z-nav: 60;
  --z-drawer: 70;
  --z-toast: 80;
  --z-modal: 90;
  --z-progress: 95;
}
/* Daylight Bazaar — sandalwood cream. Full re-declaration, no partials. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --midnight: #F8F2E5;
    --midnight-2: #EFE6D4;
    --panel: #FFFCF5;
    --panel-2: #FBF4E6;
    --lattice: rgba(10, 22, 32, .06);
    --foil: #A57C25;
    --foil-soft: rgba(165, 124, 37, .34);
    --foil-faint: rgba(165, 124, 37, .16);
    --marigold: #C97A06;
    --rose: #C43A55;
    --peacock: #0E7A78;
    --jade: #197D57;
    --ember: #D4501C;
    --pearl: #0A1620;
    --pearl-soft: #4C5F6C;
    --pearl-dim: #596974;
    --ink-marigold: #955A02;
    --ink-peacock: #0B6664;
    --ink-jade: #12694A;
    --ink-rose: #A82C45;
    --ink-ember: #B44016;
    --grad-cta: linear-gradient(118deg, #CA7B06, #E2A32F 45%, #DD531D);
    --grad-lamp: radial-gradient(60% 70% at 50% 0%, rgba(201,122,6,.10), transparent 72%);
    --veil: rgba(40, 30, 14, .58);
    --lift-0: 0 1px 0 rgba(255,255,255,.9) inset;
    --lift-1: 0 12px 26px -18px rgba(56,40,14,.34), 0 1px 0 rgba(255,255,255,.9) inset;
    --lift-2: 0 22px 48px -26px rgba(56,40,14,.36), 0 1px 0 rgba(255,255,255,.9) inset;
    --lift-3: 0 34px 76px -32px rgba(56,40,14,.4), 0 1px 0 rgba(255,255,255,.9) inset;
  }
}
[data-theme="light"] {
  color-scheme: light;
  --midnight: #F8F2E5;
  --midnight-2: #EFE6D4;
  --panel: #FFFCF5;
  --panel-2: #FBF4E6;
  --lattice: rgba(10, 22, 32, .06);
  --foil: #A57C25;
  --foil-soft: rgba(165, 124, 37, .34);
  --foil-faint: rgba(165, 124, 37, .16);
  --marigold: #C97A06;
  --rose: #C43A55;
  --peacock: #0E7A78;
  --jade: #197D57;
  --ember: #D4501C;
  --pearl: #0A1620;
  --pearl-soft: #4C5F6C;
  --pearl-dim: #596974;
  --ink-marigold: #955A02;
  --ink-peacock: #0B6664;
  --ink-jade: #12694A;
  --ink-rose: #A82C45;
  --ink-ember: #B44016;
  --grad-cta: linear-gradient(118deg, #CA7B06, #E2A32F 45%, #DD531D);
  --grad-lamp: radial-gradient(60% 70% at 50% 0%, rgba(201,122,6,.10), transparent 72%);
  --veil: rgba(40, 30, 14, .58);
  --lift-0: 0 1px 0 rgba(255,255,255,.9) inset;
  --lift-1: 0 12px 26px -18px rgba(56,40,14,.34), 0 1px 0 rgba(255,255,255,.9) inset;
  --lift-2: 0 22px 48px -26px rgba(56,40,14,.36), 0 1px 0 rgba(255,255,255,.9) inset;
  --lift-3: 0 34px 76px -32px rgba(56,40,14,.4), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* Arches must not become domes on a phone. */
@media (max-width: 720px) {
  :root { --arch-top: 130px; }
}
@media (max-width: 460px) {
  :root { --arch-top: 92px; }
}