/* Written by `node brand/build.js` from brand/tokens.css. Edit that file, not this one. */
/* Party Room brand tokens and the few brand classes.
   This file is the kit's copy; `node brand/build.js` writes it to shared/brand.css, which the TV
   and the phones load. Light is the default. [data-theme="dark"] switches (so does a dark OS
   setting when a page sets no data-theme). Every colour is a token: nothing in the product
   should carry a literal brand colour. Read from a couch: ink on paper is 15:1, ink on yellow
   11:1, ink-2 on paper 6:1. */
:root, [data-theme="light"] {
  color-scheme: light;
  --pr-paper: #f6f2ea;             /* the ground: TV lobby, phone, sales page */
  --pr-panel: #fffdf8;             /* raised panels and cards on the paper */
  --pr-panel-2: #efe9dd;           /* a lower panel: wells, segmented controls */
  --pr-ink: #15161f;               /* text, the mark's tile, hard shadows, focus */
  --pr-ink-2: rgba(21, 22, 31, .64);   /* secondary text on paper and panel */
  --pr-ink-3: rgba(21, 22, 31, .4);    /* hints, counts, disabled text */
  --pr-line: rgba(21, 22, 31, .12);    /* hairlines and quiet borders */
  --pr-fill: rgba(21, 22, 31, .07);    /* quiet fills: chips, plain buttons */
  --pr-fill-2: rgba(21, 22, 31, .12);  /* a pressed or hovered quiet fill */
  --pr-yellow: #ffd23f;            /* the one action colour: Join, Start, Buy, YOUR TURN */
  --pr-on-yellow: #15161f;         /* text on yellow */
  --pr-good: #1f9d55;              /* right answers, paid, connected */
  --pr-bad: #e5484d;               /* wrong, owed, leave */
  --pr-warn: #f26b2a;              /* needs more players, reconnecting */
  --pr-focus: #15161f;             /* the TV's focus ring and the web focus outline */
  --pr-coral: #ff6b6b; --pr-sky: #38bdf8; --pr-lemon: #ffd93d; --pr-lime: #a3e635;   /* the four seats on the mark */
  --pr-lid-red: #e5484d; --pr-lid-orange: #f26b2a; --pr-lid-gold: #f2b705; --pr-lid-green: #27a35f;
  --pr-lid-teal: #159e9c; --pr-lid-blue: #3573f0; --pr-lid-purple: #7a5af5; --pr-lid-pink: #e4499a;
  --pr-shadow: 0 20px 50px rgba(21, 22, 31, .12);       /* a card resting on the paper */
  --pr-shadow-lift: 0 30px 70px rgba(21, 22, 31, .2);   /* a card picked up: the focused tile */
  --pr-hard: 0 5px 0 var(--pr-ink);                     /* the chunky button's hard shadow */
  --pr-display: "Rubik", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --pr-text: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --pr-radius-sm: 8px; --pr-radius: 14px; --pr-radius-lg: 20px; --pr-radius-xl: 28px; --pr-pill: 999px;
  --pr-space-1: 4px; --pr-space-2: 8px; --pr-space-3: 12px; --pr-space-4: 16px; --pr-space-5: 24px; --pr-space-6: 32px; --pr-space-7: 48px; --pr-space-8: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pr-paper: #121420; --pr-panel: #1c1f2e; --pr-panel-2: #272b3d;
    --pr-ink: #f6f2ea; --pr-ink-2: rgba(246, 242, 234, .66); --pr-ink-3: rgba(246, 242, 234, .42);
    --pr-line: rgba(246, 242, 234, .14); --pr-fill: rgba(246, 242, 234, .08); --pr-fill-2: rgba(246, 242, 234, .14);
    --pr-good: #4ade80; --pr-bad: #ff6b6b; --pr-warn: #ff9f43; --pr-focus: #f6f2ea;
    --pr-shadow: 0 20px 50px rgba(0, 0, 0, .45); --pr-shadow-lift: 0 30px 70px rgba(0, 0, 0, .6);
    --pr-hard: 0 5px 0 rgba(0, 0, 0, .65);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --pr-paper: #121420; --pr-panel: #1c1f2e; --pr-panel-2: #272b3d;
  --pr-ink: #f6f2ea; --pr-ink-2: rgba(246, 242, 234, .66); --pr-ink-3: rgba(246, 242, 234, .42);
  --pr-line: rgba(246, 242, 234, .14); --pr-fill: rgba(246, 242, 234, .08); --pr-fill-2: rgba(246, 242, 234, .14);
  --pr-good: #4ade80; --pr-bad: #ff6b6b; --pr-warn: #ff9f43; --pr-focus: #f6f2ea;
  --pr-shadow: 0 20px 50px rgba(0, 0, 0, .45); --pr-shadow-lift: 0 30px 70px rgba(0, 0, 0, .6);
  --pr-hard: 0 5px 0 rgba(0, 0, 0, .65);
}

/* The wordmark (Brand.wordmark): PARTY ROOM in the display face. Size it with font-size. */
.pr-wordmark { display: inline-flex; gap: .24em; font-family: var(--pr-display); font-weight: 900; font-size: 1em; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: inherit; }
.pr-wordmark i { font-style: normal; }
.pr-wordmark i.lit:first-of-type { color: var(--pr-coral); }
.pr-wordmark i.lit:last-of-type { color: var(--pr-sky); }
.pr-wordmark.stacked { flex-direction: column; align-items: flex-start; gap: .06em; }
/* The mark beside the wordmark (Brand.lockup). */
.pr-lockup { display: inline-flex; align-items: center; gap: .3em; font-size: inherit; line-height: 1; }
.pr-lockup .pr-mark { width: 1.15em; height: 1.15em; flex: none; }
.pr-mark { display: inline-block; vertical-align: middle; }
/* A game's lid (Brand.lid): 16:9, rounded by its box. */
.pr-lid { display: block; width: 100%; height: auto; border-radius: var(--pr-radius-lg); }

/* The chunky button: the one yellow thing on the screen. */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3em; padding: 0 1.4em; border-radius: var(--pr-radius); border: .16em solid var(--pr-ink); background: var(--pr-yellow); color: var(--pr-on-yellow); font-family: var(--pr-display); font-weight: 700; font-size: 1em; line-height: 1; letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: var(--pr-hard); transition: transform .12s ease, box-shadow .12s ease; }
.pr-btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--pr-ink); }
.pr-btn:active { transform: translateY(5px); box-shadow: none; }
.pr-btn.quiet { background: var(--pr-panel); color: var(--pr-ink); }
.pr-btn:focus-visible { outline: 3px solid var(--pr-focus); outline-offset: 3px; }
/* A small ink label: kinds, counts, "FREE". */
.pr-pill { display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em .4em; border-radius: var(--pr-pill); background: var(--pr-ink); color: var(--pr-paper); font-family: var(--pr-display); font-weight: 700; font-size: .8em; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pr-pill.yellow { background: var(--pr-yellow); color: var(--pr-on-yellow); }
.pr-pill.quiet { background: var(--pr-fill); color: var(--pr-ink-2); }