/* GameCabi 0.68 theme: the ONE token set shared by Relay (desktop) and gamecabi.com.
   Every colour, font, radius, spacing step and shadow of the 0.68 look is defined here and nowhere else; Relay's
   stylesheets (renderer/theme/relay-068.css, renderer/library.css, ...) only read these with var(--gc-*).
   A JSON mirror with the same names and values is gc-tokens-068.json (test/theme-tokens.test.js keeps them equal).

   Modes: dark is the default. Light is the same look on a light ground (cards stay glass, the top bar stays dark).
   Light is chosen by  :root[data-gc-scheme="light"]  or the  .gc-light  class (the site), or by Relay's two light
   palettes  html[data-theme="daylight"] / html[data-theme="cabi"]  (Relay sets those; the selectors are listed here so
   the values stay in this one file).
   Accent variants: --gc-accent is green; a palette may swap it for one of the --gc-accent-<name> constants below.
   .gc-night re-applies the dark set inside a light page (Relay's Home and game sheet stay dark over the photo). */
:root, .gc-night {
  /* ---- "night" constants: what stays dark in BOTH modes (top bar, pill menu, the home grid over the photo, covers).
     The dark mode below reads them; light mode leaves them alone. */
  --gc-night-ink: #f1f5f4;
  --gc-night-ink-2: #c9d3d1;
  --gc-night-muted: #a3b0ad;
  --gc-night-line: rgba(255, 255, 255, .12);
  --gc-night-line-2: rgba(255, 255, 255, .20);
  --gc-night-glass: rgba(11, 15, 17, .84);
  --gc-night-glass-2: rgba(255, 255, 255, .06);
  --gc-night-warn: #f7c77f;
  --gc-night-err: #fca5a5;
  --gc-night-focus: #9ff0c8;
  --gc-night-pill: rgba(255, 255, 255, .16);
  --gc-night-hover: rgba(255, 255, 255, .09);
  --gc-night-photo-plain: radial-gradient(ellipse 110% 80% at 50% 0%, #17232a 0%, #0b1013 60%, #07090b 100%);
  --gc-night-photo-shade-deep: linear-gradient(180deg, rgba(6, 9, 11, .52), rgba(6, 9, 11, .44) 40%, rgba(6, 9, 11, .74));
  --gc-night-photo-filter-deep: blur(10px) saturate(.85) brightness(.6);

  /* ---- colours, dark (default) */
  --gc-bg: #080b0d;               /* window ground behind the photo */
  --gc-ground: var(--gc-ground-carbon); /* the ground a Relay palette picks (theme/relay-palettes.css) */
  --gc-bg-deep: #07090b;
  --gc-surface: var(--gc-night-glass);        /* glass card / tile / panel */
  --gc-surface-2: var(--gc-night-glass-2);    /* a quiet fill inside glass (chips, inputs, Back) */
  --gc-surface-hover: rgba(22, 30, 33, .82);
  --gc-surface-solid: #11171a;    /* pop-ups, menus, dialogs: never see-through */
  --gc-surface-raised: #10161a;   /* command palette / large dialog */
  --gc-field: rgba(4, 7, 8, .55); /* text inputs and selects */
  --gc-bg-2: #0e1417;             /* a solid secondary ground: bands, table heads, scrollbar tracks */
  --gc-band: rgba(7, 10, 12, .86);        /* the page's second row (Back, page name, links) */
  --gc-frame: #090c0e;            /* the frame around a cover */
  --gc-bar: rgba(7, 10, 12, .95);         /* top bar (dark in both modes) */
  --gc-bar-2: rgba(7, 10, 12, .88);
  --gc-bar-line: rgba(255, 255, 255, .07);
  --gc-status-bar: rgba(7, 10, 12, .90);
  --gc-ink: var(--gc-night-ink);  /* text */
  --gc-ink-2: var(--gc-night-ink-2); /* secondary text */
  --gc-muted: var(--gc-night-muted); /* captions (AA on --gc-surface) */
  --gc-ink-on-bar: var(--gc-night-ink);
  --gc-line: var(--gc-night-line);
  --gc-line-2: var(--gc-night-line-2);
  --gc-line-strong: rgba(255, 255, 255, .34);
  --gc-hairline: rgba(255, 255, 255, .06);
  --gc-hover: rgba(255, 255, 255, .09);
  --gc-pill: rgba(255, 255, 255, .16);        /* the lit pill of the pill menu */
  --gc-pill-track: rgba(255, 255, 255, .07);  /* the pill menu's track */
  --gc-pill-track-line: rgba(255, 255, 255, .09);
  --gc-accent: var(--gc-accent-green); /* green: Play, primary buttons, the ready dot */
  --gc-accent-2: var(--gc-accent-green-2);
  --gc-on-accent: var(--gc-on-accent-green);
  --gc-accent-soft: rgba(53, 208, 127, .16);
  --gc-accent-glow: rgba(53, 208, 127, .28);
  --gc-link: #8fe6bd;
  --gc-focus: var(--gc-night-focus);
  --gc-ok: var(--gc-accent-green);
  --gc-ok-ink: #6fe3a6;
  --gc-ok-bg: rgba(53, 208, 127, .12);
  --gc-warn: var(--gc-night-warn);
  --gc-warn-ink: #ffe2b0;
  --gc-warn-bg: rgba(40, 28, 10, .85);
  --gc-warn-line: rgba(247, 199, 127, .5);
  --gc-warn-soft: rgba(247, 199, 127, .12);
  --gc-err: var(--gc-night-err);
  --gc-err-strong: #ff6b7d;
  --gc-err-bg: rgba(60, 14, 20, .78);
  --gc-amber: #f2a541;            /* the fourth diamond of the mark */
  --gc-owner: #f7c77f;            /* owner-only pills, tiles and tags */
  --gc-owner-on: rgba(242, 165, 65, .22);
  --gc-gold: #ffd978;
  --gc-scrim: rgba(4, 6, 8, .62);
  --gc-photo-shade: linear-gradient(180deg, rgba(6, 9, 11, .10) 0, rgba(6, 9, 11, .06) 44%, rgba(6, 9, 11, .46) 70%, rgba(6, 9, 11, .72) 100%);
  --gc-photo-shade-deep: var(--gc-night-photo-shade-deep);
  --gc-photo-plain: var(--gc-night-photo-plain);
  --gc-photo-filter-deep: var(--gc-night-photo-filter-deep);

  /* ---- accent variants (a palette swaps --gc-accent / -2 / --gc-on-accent for one of these) */
  --gc-accent-green: #35d07f;   --gc-accent-green-2: #5be29b;   --gc-on-accent-green: #04180d;
  --gc-accent-teal: #3cc8b4;    --gc-accent-teal-2: #7fe3d4;    --gc-on-accent-teal: #03201b;
  --gc-accent-blue: #6f8cff;    --gc-accent-blue-2: #9fb3ff;    --gc-on-accent-blue: #070f2e;
  --gc-accent-steel: #8ea6e6;   --gc-accent-steel-2: #b5c6f2;   --gc-on-accent-steel: #0b1430;
  --gc-accent-violet: #c47cf0;  --gc-accent-violet-2: #dcaaf7;  --gc-on-accent-violet: #1d0828;
  --gc-accent-pink: #ff5aa5;    --gc-accent-pink-2: #ff8cc0;    --gc-on-accent-pink: #2a0315;
  /* window ground per Relay palette (mostly hidden under the photo; it shows on "Plain dark" and while loading) */
  --gc-ground-carbon: #080b0d;  --gc-ground-mist: #0a1315;  --gc-ground-midnight: #080c17;  --gc-ground-slate: #0b0d10;
  --gc-ground-amethyst: #0d0a13;  --gc-ground-daylight: #e9eeed;  --gc-ground-cabi: #f5e9ee;
  /* the same accents, darker, for text and fills on a light ground (AA on white) */
  --gc-accent-green-light: #0f7d48;  --gc-accent-blue-light: #2f4fd0;  --gc-accent-pink-light: #b8115f;

  /* ---- type */
  --gc-font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --gc-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --gc-font-mono: "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, Menlo, monospace;
  --gc-fs-body: 14px;
  --gc-fs-small: 13px;
  --gc-fs-tiny: 12px;
  --gc-fs-label: 12px;            /* pill menu / section labels: upper case, tracked */
  --gc-fs-title: clamp(24px, 2.6vw, 34px);
  --gc-fs-h2: 17px;
  --gc-weight-label: 600;
  --gc-weight-strong: 700;
  --gc-track-label: 1.5px;
  --gc-track-caps: .2em;          /* the name set in type over a cover */
  --gc-line-height: 1.5;

  /* ---- shape */
  --gc-radius-pill: 999px;        /* buttons, pills, chips, the menu */
  --gc-radius-card: 18px;         /* cover frames, page cards */
  --gc-radius-cover: 13px;
  --gc-radius-tile: 14px;         /* sheet tiles, small cards */
  --gc-radius-pop: 12px;          /* menus and pop-ups */
  --gc-radius-dialog: 16px;
  --gc-radius-field: 10px;        /* inputs and selects */
  --gc-radius-chip: 8px;

  /* ---- spacing */
  --gc-space-1: 4px;
  --gc-space-2: 8px;
  --gc-space-3: 12px;
  --gc-space-4: 16px;
  --gc-space-5: 24px;
  --gc-space-6: 32px;
  --gc-bar-h: 56px;

  /* ---- shadows */
  --gc-shadow-card: 0 16px 36px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  --gc-shadow-card-hover: 0 24px 46px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  --gc-shadow-pop: 0 18px 40px rgba(0, 0, 0, .55);
  --gc-shadow-dialog: 0 30px 70px rgba(0, 0, 0, .6);
  --gc-shadow-play: 0 10px 26px rgba(53, 208, 127, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
  --gc-shadow-panel: 0 10px 30px rgba(0, 0, 0, .35);
  --gc-shadow-button: 0 6px 16px rgba(53, 208, 127, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  --gc-shadow-none: none;

  /* ---- the group photo (the owner's picture) and its pre-blurred copy. Chromium resolves a url() held in a custom
     property against the page/stylesheet that USES it, not this file: in Relay every user is in renderer/ (index.html,
     library.css, relay-068.css, updating.html), so the paths are written from there. The site sets its own two paths
     (same files: see "photo" in gc-tokens-068.json for names and md5). */
  --gc-photo: url("assets/library/backdrop.webp");
  --gc-photo-soft: url("assets/library/backdrop-soft.webp");
  --gc-photo-position: 50% 16%;
}

/* ---- light mode: the same look on a light ground. The bar and the pill menu stay dark. */
:root[data-gc-scheme="light"], .gc-light, html[data-theme="daylight"], html[data-theme="cabi"] {
  --gc-bg: #e9eeed;
  --gc-ground: var(--gc-ground-daylight);
  --gc-bg-deep: #dfe6e4;
  --gc-surface: rgba(255, 255, 255, .86);
  --gc-surface-2: rgba(10, 22, 20, .05);
  --gc-surface-hover: rgba(255, 255, 255, .95);
  --gc-surface-solid: #ffffff;
  --gc-surface-raised: #ffffff;
  --gc-field: rgba(255, 255, 255, .92);
  --gc-bg-2: #f4f7f6;
  --gc-band: rgba(250, 252, 251, .90);
  --gc-ink: #10181a;
  --gc-ink-2: #2c3a3d;
  --gc-muted: #56666a;
  --gc-line: rgba(10, 22, 24, .14);
  --gc-line-2: rgba(10, 22, 24, .24);
  --gc-line-strong: rgba(10, 22, 24, .40);
  --gc-hairline: rgba(10, 22, 24, .07);
  --gc-hover: rgba(10, 22, 24, .07);
  --gc-accent: #0f7d48;
  --gc-accent-2: #16a061;
  --gc-on-accent: #ffffff;
  --gc-accent-soft: rgba(15, 125, 72, .12);
  --gc-accent-glow: rgba(15, 125, 72, .22);
  --gc-link: #0b6b3d;
  --gc-focus: #0b6b3d;
  --gc-ok: #0b6b3d;               /* AA (4.5:1) as text on the light ground too */
  --gc-ok-ink: #0b6b3d;
  --gc-ok-bg: rgba(15, 125, 72, .10);
  --gc-warn: #8a5a00;
  --gc-warn-ink: #6e4700;
  --gc-warn-bg: rgba(255, 243, 222, .92);
  --gc-warn-line: rgba(138, 90, 0, .45);
  --gc-warn-soft: rgba(138, 90, 0, .10);
  --gc-pill: rgba(10, 22, 24, .10);
  --gc-err: #b42339;
  --gc-err-strong: #b42339;
  --gc-err-bg: rgba(255, 232, 236, .92);
  --gc-owner: #8a5a00;
  --gc-owner-on: rgba(242, 165, 65, .22);
  --gc-gold: #8a6100;
  --gc-scrim: rgba(20, 28, 32, .45);
  --gc-photo-shade-deep: linear-gradient(180deg, rgba(233, 238, 237, .55), rgba(233, 238, 237, .48) 40%, rgba(233, 238, 237, .70));
  --gc-photo-plain: radial-gradient(ellipse 110% 80% at 50% 0%, #f6f9f8 0%, #e9eeed 60%, #dfe6e4 100%);
  --gc-photo-filter-deep: blur(10px) saturate(.8) brightness(1.15);
  --gc-shadow-card: 0 12px 30px rgba(15, 30, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .6);
  --gc-shadow-card-hover: 0 18px 38px rgba(15, 30, 32, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
  --gc-shadow-pop: 0 18px 40px rgba(15, 30, 32, .22);
  --gc-shadow-dialog: 0 30px 70px rgba(15, 30, 32, .28);
  --gc-shadow-panel: 0 10px 30px rgba(15, 30, 32, .14);
  --gc-shadow-button: 0 4px 12px rgba(15, 30, 32, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
  color-scheme: light;
}

/* ---- motion (0.68.0): one set of timings for page, tab, card and pop-up changes, in Relay and on gamecabi.com.
   Kept out of the :root/.gc-night block above on purpose: .gc-night re-declares that block inside Relay's Home, and it
   must not switch motion back on where the person turned it off.
   Rules for anything that uses these: animate transform and opacity only (the compositor runs them, nothing is laid
   out again), never wait for an animation before taking input, no will-change by default.
   --gc-motion-stagger-max is a plain number: card n waits min(n, max) x --gc-motion-stagger, later cards come with it. */
:root {
  --gc-motion-page: 220ms;          /* a page or a view comes in (fade + a small slide into place) */
  --gc-motion-tab: 180ms;           /* the content under an in-page tab */
  --gc-motion-card: 200ms;          /* one card of the stagger */
  --gc-motion-stagger: 24ms;        /* the step between two cards */
  --gc-motion-stagger-max: 6;       /* at most 6 steps: the last card starts 144 ms after the first */
  --gc-motion-dialog-in: 200ms;     /* a dialog or pop-up opens (fade + scale up) */
  --gc-motion-dialog-out: 140ms;    /* and closes, a little quicker */
  --gc-motion-menu: 150ms;          /* a small menu drops open */
  --gc-motion-shift: 8px;           /* how far a page, a tab's content or a card slides */
  --gc-motion-scale: .97;           /* a dialog's scale when it starts to open and when it has closed */
  --gc-motion-ease-out: cubic-bezier(.2, .8, .2, 1);   /* coming in: quick start, soft landing */
  --gc-motion-ease-in: cubic-bezier(.4, 0, 1, 1);      /* going out */
}
/* "Fade only": a setting in Relay, and what Relay uses after it started in GPU safe mode (drawing without the graphics
   card). The fade stays; the slide, the scale and the stagger go. On the site: the .gc-motion-fade class. */
html[data-gc-motion="fade"], .gc-motion-fade {
  --gc-motion-stagger: 0ms;
  --gc-motion-shift: 0px;
  --gc-motion-scale: 1;
}
/* "Off": Relay's own setting (Settings > Look > Screen animations), or the .gc-motion-off class: every change is instant. */
html[data-gc-motion="off"], .gc-motion-off {
  --gc-motion-page: 0ms;
  --gc-motion-tab: 0ms;
  --gc-motion-card: 0ms;
  --gc-motion-stagger: 0ms;
  --gc-motion-dialog-in: 0ms;
  --gc-motion-dialog-out: 0ms;
  --gc-motion-menu: 0ms;
  --gc-motion-shift: 0px;
  --gc-motion-scale: 1;
}
/* The system asks for reduced motion (Windows: Settings > Accessibility > Visual effects > Animation effects off):
   the same as "Off", whatever the app setting says. */
@media (prefers-reduced-motion: reduce) {
  html:root {
    --gc-motion-page: 0ms;
    --gc-motion-tab: 0ms;
    --gc-motion-card: 0ms;
    --gc-motion-stagger: 0ms;
    --gc-motion-dialog-in: 0ms;
    --gc-motion-dialog-out: 0ms;
    --gc-motion-menu: 0ms;
    --gc-motion-shift: 0px;
    --gc-motion-scale: 1;
  }
}