/* =====================================================================
   Playbay design tokens — Harbor Night
   The ONLY file allowed to contain raw colour values, font names,
   pixel sizes for type, radii, shadows, durations and z-indexes.
   Everything else references these custom properties.
   ===================================================================== */
/* Self-hosted Saira (SIL OFL 1.1, fonts/OFL.txt). The portal CSP allows only same-origin fonts.
   Chinese uses the system's CJK font: no multi-megabyte web font. */
@font-face {
  font-family: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  src: url("fonts/saira-latin.woff2") format("woff2");
  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: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  src: url("fonts/saira-latin-ext.woff2") format("woff2");
  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 {
  color-scheme: dark;

  /* ---------- Colour primitives (do not use directly in components) ---------- */
  --pb-night-950: #0A1520;
  --pb-night-900: #0E1B2A;
  --pb-night-800: #152A3F;
  --pb-night-700: #1D3651;
  --pb-night-600: #284762;
  --pb-night-500: #3A5D7C;
  --pb-night-450: #557EA0;
  --pb-night-400: #7F95AA;
  --pb-night-300: #9DB2C6;
  --pb-night-200: #C7D6E3;
  --pb-night-100: #E9F1F8;

  --pb-lantern-600: #F2B21B;
  --pb-lantern-500: #FFC940;
  --pb-lantern-200: #FFE6A3;

  --pb-green-500: #5BD69A;
  --pb-red-400: #FF8A80;
  --pb-red-600: #C93A33;
  --pb-orange-400: #FFA65C;
  --pb-blue-400: #7CC4FF;

  /* ---------- Semantic colour roles (components use these) ---------- */
  --pb-bg: var(--pb-night-900);            /* page */
  --pb-bg-sunken: var(--pb-night-950);     /* inputs, game backdrop */
  --pb-surface: var(--pb-night-800);       /* panels, rows, cards */
  --pb-surface-raised: var(--pb-night-700);/* hover, selected, tags */
  --pb-border: var(--pb-night-600);
  --pb-border-strong: var(--pb-night-500);
  --pb-border-control: var(--pb-night-450); /* form control edges: >= 3:1 on every surface */

  --pb-text: var(--pb-night-100);          /* 15.2:1 on bg */
  --pb-text-secondary: var(--pb-night-200);/* 11.7:1 on bg */
  --pb-text-muted: var(--pb-night-300);    /* 8.0:1 on bg, 6.7:1 on surface */
  --pb-text-subtle: var(--pb-night-400);   /* 5.6:1 on bg, 4.7:1 on surface — never on raised */

  --pb-accent: var(--pb-lantern-500);      /* primary action, selection, brand */
  --pb-accent-hover: var(--pb-lantern-600);
  --pb-accent-soft: var(--pb-lantern-200);
  --pb-on-accent: var(--pb-night-900);     /* text on accent: 11.3:1 */

  --pb-live: var(--pb-green-500);          /* playing now, online, success */
  --pb-danger: var(--pb-red-400);          /* error text, destructive outline */
  --pb-danger-fill: var(--pb-red-600);     /* destructive button fill (white text 5.1:1) */
  --pb-warning: var(--pb-orange-400);      /* pending, expiring, caution */
  --pb-info: var(--pb-blue-400);           /* neutral notices */

  --pb-on-danger: #FFFFFF;
  --pb-on-identity: #FFFFFF;
  --pb-media-chip: rgb(14 27 42 / 0.85);   /* labels laid over game pictures */
  --pb-focus: var(--pb-lantern-500);
  --pb-scrim: rgb(5 12 20 / 0.72);

  /* Player identity colours (avatars without a character picture). White text >= 4.5:1. */
  --pb-id-1: #1A7F53; --pb-id-2: #6A4FE0; --pb-id-3: #C4532B; --pb-id-4: #C2336F;
  --pb-id-5: #2F6FD6; --pb-id-6: #8A6A12; --pb-id-7: #4F5D6E; --pb-id-8: #0F7C86;

  /* ---------- Typography ---------- */
  --pb-font: "Saira", system-ui, sans-serif;
  --pb-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Saira", system-ui, sans-serif;
  --pb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* build logs and codes only */

  --pb-stretch-narrow: 72%;   /* page titles, game titles in spotlight */
  --pb-stretch-condensed: 85%;/* section headings, tabs, nav */
  --pb-stretch-normal: 100%;  /* body, UI */
  --pb-stretch-wide: 122%;    /* wordmark only */

  --pb-text-2xs: 11px;  /* count badges only */
  --pb-text-xs: 12px;   /* tiny tags on media, tab bar */
  --pb-text-sm: 13px;   /* meta, captions, help text */
  --pb-text-md: 14px;   /* secondary UI, small buttons */
  --pb-text-base: 15px; /* body, inputs, buttons */
  --pb-text-lg: 17px;   /* lead, nav, tabs */
  --pb-text-xl: 19px;   /* row titles (condensed) */
  --pb-text-2xl: 24px;  /* section titles (condensed) */
  --pb-text-3xl: 30px;  /* page titles on phone (narrow) */
  --pb-text-4xl: 38px;  /* page titles (narrow) */
  --pb-text-5xl: 52px;  /* hero game title in player/detail (narrow) */
  --pb-logo-md: 23px;   /* wordmark in header */
  --pb-logo-lg: 40px;   /* wordmark on auth / styleguide */

  --pb-weight-regular: 400;
  --pb-weight-medium: 600;
  --pb-weight-bold: 700;
  --pb-weight-black: 800;

  --pb-leading-tight: 1.05;
  --pb-leading-snug: 1.25;
  --pb-leading-body: 1.5;

  /* ---------- Spacing (4 px base) ---------- */
  --pb-space-1: 2px;  --pb-space-2: 4px;  --pb-space-3: 6px;  --pb-space-4: 8px;
  --pb-space-5: 10px; --pb-space-6: 12px; --pb-space-7: 16px; --pb-space-8: 20px;
  --pb-space-9: 24px; --pb-space-10: 32px; --pb-space-11: 40px; --pb-space-12: 56px;

  /* ---------- Shape ---------- */
  --pb-radius-sm: 4px;   /* tags, thumbnails, badges */
  --pb-radius: 6px;      /* controls, panels, avatars */
  --pb-radius-lg: 10px;  /* dialogs, sheets */
  --pb-border-width: 1px;
  --pb-focus-ring: 3px;

  /* ---------- Elevation: surfaces are flat; only floating layers get a shadow ---------- */
  --pb-shadow-float: 0 10px 28px rgb(0 0 0 / 0.45);

  /* ---------- Sizing ---------- */
  --pb-control-sm: 34px;
  --pb-control-md: 44px;  /* minimum touch target */
  --pb-control-lg: 52px;
  --pb-avatar-xs: 24px; --pb-avatar-sm: 32px; --pb-avatar-md: 40px; --pb-avatar-lg: 64px; --pb-avatar-xl: 112px;
  --pb-icon-sm: 15px; --pb-icon-md: 18px; --pb-icon-lg: 24px; --pb-icon-xl: 32px;
  --pb-header-h: 64px;
  --pb-container: 1480px;
  --pb-gutter: 20px;
  --pb-side-w: 252px;
  --pb-aside-w: 280px;
  --pb-readable: 68ch;

  /* ---------- Motion ---------- */
  --pb-dur-fast: 120ms;
  --pb-dur: 180ms;
  --pb-dur-slow: 260ms;
  --pb-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Layers ---------- */
  --pb-z-header: 20;
  --pb-z-tabbar: 30;
  --pb-z-menu: 40;
  --pb-z-shell: 50;
  --pb-z-dialog: 60;
  --pb-z-toast: 70;
}

/* Breakpoints (custom properties cannot be used in media queries; these are the only three):
   phone   < 900px
   tablet  900–1259px
   desktop >= 1260px */

@media (max-width: 899px) {
  :root { --pb-gutter: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pb-dur-fast: 0ms; --pb-dur: 0ms; --pb-dur-slow: 0ms; }
}

:lang(zh) { --pb-font: var(--pb-font-zh); }