/* Design tokens — F6.23 "Graphite & Ember" (evolves M7-B). The ONLY place where raw colours, fonts and sizes are
   defined; components use semantic tokens only (app.css is test-checked for hex colours).
   Identity: a cool graphite base, ONE warm accent (ember) for primary actions, prices and focus of attention, a cool
   "glacier" blue for links and focus rings. Display type Sora, interface type Inter (self-hosted, SIL OFL 1.1 —
   static/fonts/LICENSE-*.txt). Dark is the default theme; <html data-theme="light"> switches to the light palette.
   Contrast (WCAG 2.2, computed for every pair, both themes): body ≥ 13.5:1, muted ≥ 6.6:1, subtle ≥ 5.1:1,
   links ≥ 5.8:1, ember text ≥ 4.5:1, dark text on ember 7.3:1, input borders ≥ 3:1.
   Breakpoints (literal in media queries): 640 phones · 768 tablets · 1024 laptops · 1440 desktops. */

/* ---- self-hosted variable fonts (only the subsets a page needs are downloaded) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---- brand (provisional name; rebrand = --brand-hue + MARKET_BRAND_NAME + brand_mark()) ---- */
  --brand-hue: 18;                                   /* ember */
  --brand-300: hsl(var(--brand-hue) 100% 78%);
  --brand-400: hsl(var(--brand-hue) 100% 69%);
  --brand-500: hsl(var(--brand-hue) 100% 64%);
  --brand-600: hsl(var(--brand-hue) 86% 54%);
  --brand-700: hsl(var(--brand-hue) 78% 40%);
  --glacier-300: #8cc4ff;                            /* links, focus, info */
  --glacier-600: #2f6fd1;
  --accent-500: hsl(var(--brand-hue) 100% 64%);      /* kept for M7 callers */

  /* ---- typography ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs: .75rem;   --text-sm: .8125rem;  --text-md: .875rem;  --text-base: .9375rem;
  --text-lg: 1.0625rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;   --text-3xl: 1.875rem;
  --text-4xl: 2.375rem; --text-5xl: 3rem;
  --leading-tight: 1.2; --leading: 1.5; --leading-relaxed: 1.65;
  --tracking-display: -.022em; --tracking-caps: .08em;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* ---- spacing (4 px grid) ---- */
  --space-0: 2px; --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;

  /* ---- shape, depth, motion, sizing ---- */
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-2: 0 10px 30px rgb(0 0 0 / .42);
  --shadow-lift: 0 14px 34px -14px rgb(0 0 0 / .65);
  --ease: cubic-bezier(.2, .8, .2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms;
  --control-h: 38px;                       /* inputs/buttons on desktop */
  --control-h-touch: 44px;                 /* minimum touch target on small screens */
  --header-h: 60px;
  --content-max: 1280px;
  --content-wide: 1440px;
  --sidebar-w: 240px;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --z-header: 50; --z-dropdown: 60; --z-drawer: 70; --z-modal: 80; --z-toast: 90;
  /* image aspect ratios (F6.23 image system) */
  --ratio-hero: 21 / 9; --ratio-card: 16 / 9; --ratio-thumb: 1 / 1; --ratio-article: 16 / 9;
  /* artwork banners stay dark in both themes (the scenes are night compositions): overlay ink + text on it */
  --hero-ink: #0a0c10; --hero-text: #f4f6fa; --hero-muted: #c9d0db;

  /* ---- dark palette (default) ---- */
  color-scheme: dark;
  --color-bg: #0a0c10;
  --color-surface: #11141a;
  --color-surface-2: #171b23;
  --color-surface-3: #1f242e;
  --color-surface-raised: #141821;
  --color-border: #262c37;
  --color-border-strong: #364050;
  --scroll-thumb: rgba(148, 160, 180, .28);       /* F6.26 thin scrollbars: thumb only, no track */
  --scroll-thumb-hover: rgba(148, 160, 180, .5);
  --color-input-border: #5f6a7c;      /* ≥ 3:1 against inputs and page (WCAG 1.4.11) */
  --color-text: #eceff4;
  --color-text-muted: #a9b1bf;
  --color-text-subtle: #8c95a4;
  --color-link: var(--glacier-300);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-400);
  --color-on-primary: #1b0d06;          /* dark text on ember (7.3:1) */
  --color-on-tile: #ffffff;             /* white text on tile tones / brand-700 */
  --color-on-badge: #10131a;
  --color-focus: var(--glacier-300);
  --color-price: #ffffff;
  --color-accent-text: hsl(var(--brand-hue) 100% 70%);   /* ember as text (≥ 6:1 on every surface) */
  --color-overlay: rgb(4 6 9 / .7);
  --color-hero-glow: hsl(var(--brand-hue) 100% 60% / .13);
  --color-hero-glow-2: rgb(80 140 255 / .10);

  /* monogram tiles for games/sellers without artwork (white text ≥ 4.5:1 on each) */
  --tile-0: #2f5ea8; --tile-1: #1f7a5c; --tile-2: #8a4b16; --tile-3: #6b3fa0;
  --tile-4: #a1323f; --tile-5: #2c6e7f; --tile-6: #5a6a1f; --tile-7: #7a3b6b;
  --color-online: #3fcf8e;
  --color-star: #f5b301;
  --color-star-empty: #3a4454;
  /* chat: outgoing = a cool slate (not the ember accent), incoming = raised surface */
  --chat-out-bg: #23406b;  --chat-out-fg: #ffffff;
  --chat-in-bg: #1c212b;   --chat-in-fg: var(--color-text);  --chat-in-bd: #2a3340;
  --chat-note-bg: #2d2412; --chat-system-fg: #9aa5b4;

  /* product families (icon tint on their fallback art; decorative, never text) */
  --family-currency: #f2b84b; --family-topup: #7fb2ff; --family-keys: #b892ff; --family-accounts: #5fd3a4;
  --family-items: #ff8f6b; --family-services: #6fd6e0; --family-other: #a9b1bf;

  --tone-neutral-fg: #c3cad5;  --tone-neutral-bg: #1f252f;  --tone-neutral-bd: #343e4d;
  --tone-info-fg: #8ec0ff;     --tone-info-bg: #12233a;     --tone-info-bd: #24426b;
  --tone-success-fg: #6fdca6;  --tone-success-bg: #0f271d;  --tone-success-bd: #1f4d38;
  --tone-warning-fg: #f6c66a;  --tone-warning-bg: #2b2211;  --tone-warning-bd: #584520;
  --tone-danger-fg: #ff9aa2;   --tone-danger-bg: #311518;   --tone-danger-bd: #5e2a30;
  --tone-accent-fg: #ffb08f;   --tone-accent-bg: #2e1810;   --tone-accent-bd: #5c2f1c;
}

:root[data-theme="light"] {
  color-scheme: light;
  --brand-700: hsl(var(--brand-hue) 82% 38%);
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f8f9fb;
  --color-surface-3: #eef0f4;
  --color-surface-raised: #ffffff;
  --color-border: #dde1e8;
  --color-border-strong: #bcc4d0;
  --scroll-thumb: rgba(60, 72, 92, .25);
  --scroll-thumb-hover: rgba(60, 72, 92, .45);
  --color-input-border: #7a8496;
  --color-text: #12161d;
  --color-text-muted: #4b5563;
  --color-text-subtle: #5b6575;
  --color-link: #1559b8;
  --color-primary: #c2410c;
  --color-primary-hover: #a8380a;
  --color-on-primary: #ffffff;
  --color-focus: #1f63c9;
  --color-price: #0f141b;
  --color-accent-text: #b13c0b;
  --color-on-badge: #ffffff;
  --color-online: #127045;
  --color-star: #b07800;
  --color-star-empty: #c9d1dc;
  --color-hero-glow: hsl(var(--brand-hue) 100% 60% / .10);
  --color-hero-glow-2: rgb(60 120 230 / .08);
  --chat-out-bg: #23406b;  --chat-out-fg: #ffffff;
  --chat-in-bg: #eef1f5;   --chat-in-fg: var(--color-text);  --chat-in-bd: #dde3ea;
  --chat-note-bg: #fff3d9; --chat-system-fg: #556070;
  --color-overlay: rgb(15 20 27 / .45);
  --shadow-1: 0 1px 2px rgb(15 20 27 / .08);
  --shadow-2: 0 10px 30px rgb(15 20 27 / .14);
  --shadow-lift: 0 14px 34px -16px rgb(15 20 27 / .35);
  --family-currency: #b07800; --family-topup: #1f63c9; --family-keys: #7a4fd6; --family-accounts: #127045;
  --family-items: #c2410c; --family-services: #0b7783; --family-other: #5b6575;

  --tone-neutral-fg: #3d4756;  --tone-neutral-bg: #eef1f5;  --tone-neutral-bd: #d4dae3;
  --tone-info-fg: #1450a8;     --tone-info-bg: #e6f0ff;     --tone-info-bd: #bcd4fb;
  --tone-success-fg: #10663f;  --tone-success-bg: #e3f6ec;  --tone-success-bd: #b4e2c9;
  --tone-warning-fg: #7a4d00;  --tone-warning-bg: #fff3d9;  --tone-warning-bd: #f2d595;
  --tone-danger-fg: #a1202c;   --tone-danger-bg: #fde8ea;   --tone-danger-bd: #f3b8be;
  --tone-accent-fg: #9a3412;   --tone-accent-bg: #fff1ea;   --tone-accent-bd: #f6c6ad;
}