/*
 * Velvet Labyrinth platform design tokens (portal, launcher, emails).
 *
 * Deliberately NOT the game's UI: no tone gradients, no pills, no bouncy motion. The platform is the
 * calm room around the games, so a player always knows they are not in a game yet (D-09).
 * Base: the website's "monochrome + one warm accent" (<website>/assets/main.css).
 * Two surfaces share fonts, accent and shapes, and differ in temperature and layout:
 *   <html data-surface="portal">    warm black, editorial: the website's members area
 *   <html data-surface="launcher">  cool graphite, functional: a desktop app
 * Spec: docs/brand/identity.md. Components use tokens only, never raw hex.
 */

:root {
  color-scheme: dark;

  /* ── Accent (shared): the website's warm sand ─────────────────────── */
  --vl-accent:        #DDB394;   /* primary buttons, links, focus, the one highlight per screen */
  --vl-accent-hover:  #E8C3A7;
  --vl-accent-ink:    #1A1310;   /* text on the accent */
  --vl-accent-soft:   rgba(221, 179, 148, 0.12);  /* selected rows, chips */
  /* The one "juicy" control per screen (the launcher's Play): a warm ramp along the button, a lit
     top edge and a soft glow. Everything else stays flat. */
  --vl-accent-ramp:       linear-gradient(100deg, #F3D2B6 0%, #E4B48F 45%, #D0906C 100%);
  --vl-accent-ramp-hover: linear-gradient(100deg, #F8DCC4 0%, #EBBF9C 45%, #DA9C78 100%);
  --vl-accent-glow:       0 10px 32px rgba(214, 150, 110, 0.32), inset 0 1px 0 rgba(255, 245, 235, 0.55);
  --vl-accent-glow-hover: 0 12px 40px rgba(214, 150, 110, 0.45), inset 0 1px 0 rgba(255, 245, 235, 0.6);
  /* Steam's wishlist green, only on "Wishlist on Steam": it signals the button leaves for Steam. */
  --vl-steam-ramp:        linear-gradient(100deg, #9AD443 0%, #74B12A 50%, #568A1E 100%);
  --vl-steam-ramp-hover:  linear-gradient(100deg, #A6DE52 0%, #80BD33 50%, #619725 100%);
  --vl-steam-ink:         #F6FFE9;
  --vl-steam-shade:       rgba(20, 40, 5, 0.35);   /* text shadow on the green */
  --vl-steam-glow:        0 10px 30px rgba(116, 177, 42, 0.28), inset 0 1px 0 rgba(236, 255, 205, 0.45);
  --vl-steam-glow-hover:  0 12px 38px rgba(116, 177, 42, 0.4), inset 0 1px 0 rgba(236, 255, 205, 0.5);
  --vl-steam-blue:        #8FD0F6;   /* Steam's own blue: marks a copy that belongs to Steam */
  --vl-danger:        #E58A72;   /* ember, never saturated red */
  --vl-success:       #A9C7A0;
  --vl-focus:         0 0 0 2px var(--vl-bg), 0 0 0 4px rgba(221, 179, 148, 0.7);
  --vl-shadow-on-art: rgba(0, 0, 0, 0.6);   /* drop shadows under logos, text and icons on key art */
  --vl-shadow-float:  0 16px 40px rgba(0, 0, 0, 0.45);   /* the only other shadow: floating things (toasts) */

  /* ── Portal surface (default): warm black, like velvetlabyrinth.com ── */
  --vl-bg:          #0F0D0C;
  --vl-bg-sunken:   #0A0908;
  --vl-bg-raised:   #171311;   /* cards, panels */
  --vl-bg-hover:    #1F1A17;
  --vl-line:        rgba(214, 182, 160, 0.13);   /* hairlines and card borders */
  --vl-line-strong: rgba(214, 182, 160, 0.26);   /* secondary button border, inputs */
  --vl-text:        #EEE6DE;
  --vl-text-2:      #B8ADA4;
  --vl-text-muted:  #8C8279;
  --vl-scrim:       rgba(15, 13, 12, 0.88);      /* behind text on art */

  /* ── Type ─────────────────────────────────────────────────────────── */
  --vl-font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;   /* titles only */
  --vl-font-ui: 'Geologica', 'Segoe UI', system-ui, sans-serif;           /* everything else */
  --vl-type-hero: 3rem;
  --vl-type-title: 2.125rem;
  --vl-type-heading: 1.5rem;
  --vl-type-body: 1rem;
  --vl-type-body-sm: 0.9375rem;
  --vl-type-caption: 0.8125rem;
  --vl-type-label: 0.75rem;      /* small uppercase labels, the only uppercase text */

  /* ── Space and size (4-point) ─────────────────────────────────────── */
  --vl-space-2xs: 4px; --vl-space-xs: 8px; --vl-space-sm: 12px; --vl-space-md: 16px;
  --vl-space-lg: 24px; --vl-space-xl: 32px; --vl-space-2xl: 48px; --vl-space-3xl: 64px;
  --vl-control-h: 44px;  --vl-control-h-sm: 34px;  --vl-control-h-lg: 52px;

  /* ── Shape: quiet, small radii. Pills only for toggles and avatars. ─ */
  --vl-radius-sm: 4px;    /* chips, code */
  --vl-radius-md: 8px;    /* buttons, fields, tiles */
  --vl-radius-lg: 12px;   /* cards, panels, dialogs */
  --vl-radius-round: 999px;

  /* ── Motion: colour and opacity, a short fade-in. No scaling, no loops. ─ */
  --vl-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --vl-t-fast: 120ms;   /* hover, focus */
  --vl-t: 180ms;        /* panels, drawers */
  --vl-enter: 240ms;    /* page content fades in, rising 6 px */

  /* ── Per-game accent (from <website>/_data/catalog.yml glow): small touches only ─ */
  --game-accent: 221, 179, 148;   /* RGB */
}

/* Launcher surface: cool graphite, denser, app-like. Same accent and fonts. */
:root[data-surface="launcher"] {
  --vl-bg:          #111215;
  --vl-bg-sunken:   #0B0C0E;
  --vl-bg-raised:   #18191D;
  --vl-bg-hover:    #202227;
  --vl-line:        rgba(220, 226, 238, 0.08);
  --vl-line-strong: rgba(220, 226, 238, 0.18);
  --vl-text:        #EDEDEF;
  --vl-text-2:      #A7AAB2;
  --vl-text-muted:  #7A7E88;
  --vl-scrim:       rgba(17, 18, 21, 0.9);
  --vl-close-hover: #C42B1C;   /* Windows' own close-button red, because that is what Windows users expect */
}

@media (prefers-reduced-motion: reduce) {
  :root { --vl-t-fast: 0ms; --vl-t: 0ms; --vl-enter: 0ms; }
}

/* Per-game accents (catalog.yml glow). Vampire Mistress keeps the brand sand. */
[data-game="vampire-mistress"]                  { --game-accent: 221, 179, 148; }
[data-game="tribal-fantasy-orc-girl-romance"]   { --game-accent: 232, 142, 92; }
[data-game="slime-girl-sticky-love"]            { --game-accent: 96, 196, 255; }
[data-game="succubus-sex-trials"]               { --game-accent: 196, 120, 255; }
[data-game="curious-sorceress-grimoire-of-sex"] { --game-accent: 150, 214, 128; }