/* 1kamas — IN-BETWEEN FRONT (port 7000): the site's own palette, toned down halfway towards the
   neutral 9000 copy, so the purchase colours stand out. Every colour here and in the other 1k-*.css
   files sits halfway between the current site (8080) and the neutral copy (9000), except:
   - the header, which is exactly the current site's (its tokens are restated on it, below);
   - the purchase elements (buy box, "Acheter" buttons and links, quick order, game tiles, offer
     window, checkout pay controls, cart badge), which keep the full purple: --cta, and the purple
     --brand restated inside the purchase blocks.
   The site's "brand" accent (--brand, --brand-dark, --brand-soft, --brand-tint) is a muted violet
   (#5E4E85) instead of #7C5CBF, so the eyebrows, chips, links and secondary buttons stay in the
   family without competing with "Acheter".
   Contrast on the light page (#F4F3F7): text 16.3:1, body text 6.1:1, smallest grey 4.8:1,
   muted violet 6.6:1, purchase purple 5.2:1 on white.
   `html:root` / `html[data-theme=dark]` win over the site's `:root` / `[data-theme=dark]`,
   including the copy inlined in every page. Remove the <link data-1k-palette> tag to undo. */

html:root {
  --canvas: 244 243 247;   /* page          #F4F3F7 (8080 #F3F1F8, 9000 #F4F4F6) */
  --surface: 255 255 255;  /* cards         #FFFFFF */
  --surface-2: 255 255 255;
  --ink: 22 22 27;         /* text          #16161B */
  --body: 91 90 101;       /* body text     #5B5A65 */
  --muted: 108 107 118;    /* small grey    #6C6B76 */
  --line: 228 228 233;     /* borders       #E4E4E9 */
  /* Muted violet accent (8080 #7C5CBF, 9000 slate #40404A); purple is kept for buying (--cta, and
     the purple --brand restated inside the purchase blocks: buy box, quick order, checkout) */
  --brand: 94 78 133;      /* #5E4E85 */
  --brand-dark: 73 57 111;
  --brand-soft: 241 238 246;
  --brand-tint: 246 245 249;
  --nav-active-text: 41 19 49;
  --nav-active-bg: 242 240 248;
  --cta: 118 94 184;       /* #765EB8 purchase purple */
  --cta-hover: 106 81 173; /* #6A51AD */
  --cta-on-dark: 184 164 238; /* #B8A4EE, on a dark panel (text #16151C) */
}

/* ---------- Dark mode: the site's purple-tinted dark, halfway to neutral ----------
   Restated so it wins over `html:root` above. Only the homepage panels below get one step
   lighter, so they stand out from the page instead of disappearing into it. */
html[data-theme="dark"] {
  --canvas: 20 18 25;      /* page          #141219 (8080 #15111D, 9000 #121214) */
  --surface: 30 27 39;     /* cards         #1E1B27 */
  --surface-2: 49 46 63;   /* raised        #312E3F */
  --ink: 243 242 247;      /* text          #F3F2F7 */
  --body: 201 196 214;     /* body text     #C9C4D6 */
  --muted: 158 152 176;    /* small grey    #9E98B0 */
  --line: 52 47 64;        /* borders       #342F40 */
  --brand: 192 177 221;    /* muted lavender #C0B1DD (8080 #B899E8) */
  --brand-dark: 164 146 199;
  --brand-soft: 44 38 55;
  --brand-tint: 38 33 48;
  --nav-active-text: 221 210 242;
  --nav-active-bg: 44 38 55;
  --cta: 139 116 208;      /* #8B74D0 */
  --cta-hover: 124 100 196;
  --cta-on-dark: 184 164 238;
}

/* ---------- Header: exactly the current site's colours ----------
   The header and its menus, panels and phone drawer use the tokens, so the current site's values
   are restated on it (the checkout and account headers too). */
html body header.sticky,
html body > div.min-h-screen > header,
html body .k4 .k4-top {
  --canvas: 243 241 248; --surface: 255 255 255; --surface-2: 255 255 255;
  --ink: 22 21 28; --body: 95 93 107; --muted: 107 105 119; --line: 228 228 233;
  --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251;
  --nav-active-text: 59 15 71; --nav-active-bg: 245 241 255;
}
html[data-theme="dark"] body header.sticky,
html[data-theme="dark"] body > div.min-h-screen > header,
html[data-theme="dark"] body .k4 .k4-top {
  --canvas: 21 17 29; --surface: 32 26 45; --surface-2: 58 53 82;
  --ink: 244 241 250; --body: 203 194 221; --muted: 160 149 186; --line: 56 47 74;
  --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56;
  --nav-active-text: 200 178 240; --nav-active-bg: 47 36 64;
}

/* Homepage 4 universes panel and guarantees band: a 12% mix of the accent over the card surface,
   clearly lighter than the page */
html[data-theme="dark"] body main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid,
html[data-theme="dark"] body main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) > .grid {
  background: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
  box-shadow: inset 0 0 0 1px rgb(var(--brand) / .18);
}
html[data-theme="dark"] body main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card,
html[data-theme="dark"] body main section.container-1k:has(> div > .grid.sm\:grid-cols-2) > div > .grid > .hp-card:hover,
html[data-theme="dark"] body main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card,
html[data-theme="dark"] body main section:not(.sm\:hidden):has(> .grid > .hp-card.items-start) .hp-card:hover { border-color: rgb(var(--brand) / .16); }

/* Game cards ("Populaires" row) and hero: a thin light outline so they stand out from the dark page */
html[data-theme="dark"] body .hp-aura .hp-lift,
html[data-theme="dark"] body .hp-aura .hp-lift:hover,
html[data-theme="dark"] body .hp-hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* ---------- Dark mode buttons ----------
   The site paints every .btn-primary purple in dark mode (#6A4AAD, hover #7C5CBF). Outside the
   purchase blocks and the header it becomes a muted violet instead: #52467A with white text, hover
   #605086 (light mode uses the muted --brand, #5E4E85). The buy box and the product pages'
   floating buy buttons, the quick order, the checkouts, the offer window and the header keep the
   site's purple; the other buy buttons have their own, more specific rules. The list is in
   :where(), so the rule stays as light as the site's own. */
html[data-theme="dark"] .btn-primary:not(:where(#buybox, main:has(#buybox), .k1-qbar, .k4, .k1m-dialog, div.min-h-screen > main[class*="max-w-[1280px]"], header) *) {
  background-color: #52467a; color: #fff;
}
html[data-theme="dark"] .btn-primary:not(:where(#buybox, main:has(#buybox), .k1-qbar, .k4, .k1m-dialog, div.min-h-screen > main[class*="max-w-[1280px]"], header) *):hover {
  background-color: #605086;
}

/* ---------- Keyboard focus ring ----------
   The site's ring is purple (#824EE08C): halfway to ink at 55% here (halfway to white at 60% in
   dark mode and on the dark panels: footer, hero), the purchase purple (--cta at 60%) inside the
   purchase blocks, and the site's own ring in the header. As light as the site's rule
   (`:where()`), so the components with their own ring keep it. */
:where(html) :focus-visible { outline-color: color-mix(in srgb, #824ee08c 50%, rgb(var(--ink) / .55)); }
:where(html[data-theme="dark"]) :focus-visible,
:where(footer.bg-plum, .hp-hero) :focus-visible,
:where(.k1-g-cta):focus-visible { outline-color: color-mix(in srgb, #824ee08c 50%, rgba(255, 255, 255, .6)); }
:where(#buybox, .k1-qbar, .k4, .k1m-dialog, div.min-h-screen > main[class*="max-w-[1280px]"]) :focus-visible { outline-color: rgb(var(--cta) / .6); }
:where(header.sticky, body > div.min-h-screen > header, .k4-top) :focus-visible { outline-color: #824ee08c; }

/* ---------- Footer: the site's plum, halfway to charcoal ----------
   Background #1C0D1D (8080 #20021F, 9000 #18181B), its lilac texts and accents toned down */
html body footer.bg-plum { background-color: #1c0d1d; color: rgba(226, 219, 235, .81); }
/* Dark mode: a faint top line, so the footer separates from the dark page (an inset shadow, so
   the footer keeps its height) */
html[data-theme="dark"] body footer.bg-plum { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
html body footer .bg-plum-800\/40 { background-color: rgba(26, 12, 26, .34); }
html body footer [class*="text-[#9d8fb3]"] { color: rgba(206, 199, 217, .75); }
html body footer a:hover { color: #fff; }
/* Newsletter "S'abonner" (was #7C5CBF, hover #6A4AAD): the muted violet of the other secondary
   buttons */
html body footer button.bg-\[\#7c5cbf\] { background-color: #52467a; color: #fff; }
html body footer button.bg-\[\#7c5cbf\]:hover { background-color: #605086; }
/* Server group names and hover accents: a lighter, softer lilac */
html body footer p.text-plum-accent { color: rgba(208, 189, 238, .86); }
html body footer .hover\:border-plum-accent:hover { border-color: rgba(208, 189, 238, .7); }
html body footer .hover\:text-plum-accent:hover { color: #d0bdee; }