/*
 * Publika tokens, and the few system rules every document shares (the shell, the
 * sign-in wall and the claim pages). tokens.css is the account portal's file and
 * stays byte-equal to it, so Publika's own palette, type scale and focus ring live
 * here, on :root, in one place. A theme overrides these names on :root; component
 * sheets read them and never redefine them. Motion tokens live in pk-motion.css.
 */
:root {
  /* Surfaces: the page, a card or panel, a raised control, a sunken field. */
  --pk-canvas: #070809;
  --pk-surface: #121315;
  --pk-surface-raised: #1a1b1e;
  --pk-surface-sunken: #0d0e10;
  --pk-scrim: rgba(3, 3, 7, .72);

  /* Lines. --pk-line-strong is the field edge (3.3:1 on --pk-surface). */
  --pk-line: rgba(236, 231, 235, .16);
  --pk-line-strong: rgba(236, 231, 235, .4);
  --pk-border: var(--pk-line);

  /* Ink: primary, secondary, tertiary (the inactive tab). All AA on every surface. */
  --pk-ink: #f5f2f1;
  --pk-muted: #b6b3b5;
  --pk-faint: #929598;

  /* The one ruby. --pk-accent marks and indicates (5.2:1 on the canvas);
     --pk-accent-strong fills (white on it is 6.8:1); --pk-accent-ink is ruby text and links. */
  --pk-accent: #d75765;
  --pk-accent-strong: #a33246;
  --pk-accent-ink: #ef94a2;
  --pk-on-accent: #ffffff;
  --pk-heart: #ec6677;
  --pk-selection: rgba(215, 87, 101, .4);

  /* The ruby glow ramp: the publish aurora, the upload crest and the heart burst. */
  --pk-glow-lead: #f2a3b1;
  --pk-glow-mid: #d75765;
  --pk-glow-trail: #8f2236;
  --pk-glow-shadow: rgba(215, 87, 101, .42);

  /* States: text on dark, a hairline, a wash. */
  --pk-good: #9cf2c4;
  --pk-good-line: rgba(156, 242, 196, .4);
  --pk-good-tint: rgba(156, 242, 196, .1);
  --pk-warn: #ffd08a;
  --pk-warn-line: rgba(255, 208, 138, .4);
  --pk-warn-tint: rgba(255, 208, 138, .1);
  --pk-error: #f2a595;
  --pk-error-line: rgba(242, 165, 149, .45);
  --pk-error-tint: rgba(242, 165, 149, .1);
  --pk-info: #b9ccff;
  --pk-info-line: rgba(185, 204, 255, .4);
  --pk-info-tint: rgba(185, 204, 255, .1);

  /* A54: the one button colour for joining (the front door, the dialog and the wall). */
  --pk-join: #22784f;
  --pk-join-line: #43cb86;
  --pk-join-strong: #1b6541;

  /* One focus ring (11.5:1 on the canvas), one hit area. */
  --pk-focus: #e9b7c7;
  --pk-focus-width: 2px;
  --pk-focus-offset: 3px;
  --pk-hit: 44px;

  /* Type: seven sizes, the four weights fonts.css ships, one heading clamp. */
  --pk-type-caption: 11px;
  --pk-type-meta: 12px;
  --pk-type-ui: 13px;
  --pk-type-body: 15px;
  --pk-type-lead: 17px;
  --pk-type-title: 22px;
  --pk-type-display: clamp(26px, 1.25vw + 18px, 36px);
  --pk-weight-regular: 400;
  --pk-weight-medium: 500;
  --pk-weight-semibold: 600;
  --pk-weight-bold: 700;

  /* Overlays (menus, sheets, dialogs, the notification panel) share one radius. */
  --pk-radius-overlay: 16px;

  /* Press: one recipe for every control, no lift and no glare. */
  --pk-press-scale: .97;
  --pk-press-filter: brightness(.9) saturate(1.12);

  /* The portal's tokens.css names its own focus, link and action colours; in Publika's documents they follow
     the ruby, so its banners, tiles and buttons draw the same ring and the same red. */
  --fs-focus: var(--pk-focus);
  --fs-link: var(--pk-accent-ink);
  --fs-action: var(--pk-accent-strong);
  --fs-action-hover: color-mix(in srgb, var(--pk-accent-strong), #000 14%);

  color-scheme: dark;
  accent-color: var(--pk-accent);
  caret-color: var(--pk-accent-ink);
  scrollbar-color: var(--pk-line-strong) transparent;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-contrast: more) {
  :root {
    --pk-muted: #d0cbd2;
    --pk-faint: #c4bacb;
    --pk-line: #8b7d91;
    --pk-line-strong: #c4abc7;
  }
}

::selection { background: var(--pk-selection); color: var(--pk-ink); }

/* The base ring. Components may inset it (negative offset) where a parent clips; nothing removes it. */
:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }

/* Autofill keeps the field's own colours instead of the browser's yellow or blue. */
:is(input, textarea, select):-webkit-autofill,
:is(input, textarea, select):-webkit-autofill:is(:hover, :focus) {
  -webkit-text-fill-color: var(--pk-ink);
  caret-color: var(--pk-accent-ink);
  box-shadow: 0 0 0 1000px var(--pk-surface-sunken) inset;
}

/* Skip to content: a fixed chip over the page, so the first Tab never moves anything. */
.pk-skip:is(:focus, :focus-visible) {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 1px solid var(--pk-line-strong);
  border-radius: 999px;
  background: var(--pk-surface-raised);
  color: var(--pk-ink);
  font: var(--pk-weight-semibold) var(--pk-type-ui)/1.2 var(--fs-font);
  text-decoration: none;
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .pk-skip:is(:focus, :focus-visible) { border-color: CanvasText; background: Canvas; color: CanvasText; }
}

/*
 * Looks and accents (D20, C49). The Look page in Settings sets data-look and data-accent on <html> (paint-boot.js reads
 * them from this device before first paint). Paint is the default and needs no tokens of its own: it keeps the dark
 * palette above and draws the ground, panes and strokes in paint.css. Glass is the earlier material (paint.css is
 * switched off for it). Matinee is the warm-paper light look; its accent tables are below with every other accent.
 */
:root[data-look="matinee"] {
  --pk-canvas: #f5eee2;
  --pk-surface: #fffaf1;
  --pk-surface-raised: #ffffff;
  --pk-surface-sunken: #ece3d3;
  --pk-scrim: rgba(36, 24, 16, .5);
  --pk-line: rgba(40, 28, 20, .16);
  --pk-line-strong: rgba(40, 28, 20, .52);
  --pk-border: var(--pk-line);
  --pk-ink: #1d1611;
  --pk-muted: #584d44;
  --pk-faint: #6b6056;
  --pk-on-accent: #ffffff;
  --pk-heart: #c42b45;
  --pk-good: #1f6a43;
  --pk-good-line: rgba(31, 106, 67, .45);
  --pk-good-tint: rgba(31, 106, 67, .1);
  --pk-warn: #84520a;
  --pk-warn-line: rgba(132, 82, 10, .45);
  --pk-warn-tint: rgba(132, 82, 10, .1);
  --pk-error: #a3321f;
  --pk-error-line: rgba(163, 50, 31, .45);
  --pk-error-tint: rgba(163, 50, 31, .1);
  --pk-info: #2f4fb3;
  --pk-info-line: rgba(47, 79, 179, .4);
  --pk-info-tint: rgba(47, 79, 179, .1);
  /* The portal tokens the shared components read (fs-button, fs-banner, fs-pill, fs-empty). */
  --fs-ink: #1d1611;
  --fs-ink-2: rgba(29, 22, 17, .72);
  --fs-ink-3: rgba(29, 22, 17, .62);
  --fs-ground: #f5eee2;
  --fs-glass: rgba(255, 250, 241, .82);
  --fs-glass-strong: rgba(255, 250, 241, .94);
  --fs-glass-solid: #fffaf1;
  --fs-line: rgba(40, 28, 20, .14);
  --fs-line-strong: rgba(40, 28, 20, .3);
  --fs-shadow: 0 14px 36px rgba(60, 40, 20, .16);
  --fs-good-label: #1f6a43;
  --fs-warn-label: #84520a;
  --fs-danger-label: #a3321f;
  --fs-info-label: #2f4fb3;
  color-scheme: light;
  accent-color: var(--pk-accent);
  caret-color: var(--pk-accent-ink);
}

/* paint:generated accents begin (node scripts/paint-assets.mjs; edit ACCENTS there) */
:root[data-accent="vermilion"] { --pk-accent: #f2634d; --pk-accent-strong: #b8321f; --pk-accent-ink: #ff9d8a; --pk-focus: #ffc1b4; --pk-selection: rgba(242, 99, 77, .4); --pk-glow-lead: #ffb3a5; --pk-glow-mid: #f2634d; --pk-glow-trail: #9a2616; --pk-glow-shadow: rgba(242, 99, 77, .42); --paint-fill: #ff5a45; --paint-on-fill: #1f0a06; }
:root[data-accent="marigold"] { --pk-accent: #e9a23b; --pk-accent-strong: #8f5a0a; --pk-accent-ink: #f6c476; --pk-focus: #ffdca0; --pk-selection: rgba(233, 162, 59, .38); --pk-glow-lead: #f9d089; --pk-glow-mid: #e9a23b; --pk-glow-trail: #8a5508; --pk-glow-shadow: rgba(233, 162, 59, .4); --paint-fill: #f2aa3f; --paint-on-fill: #221303; }
:root[data-accent="indigo"] { --pk-accent: #8d84ff; --pk-accent-strong: #4a3fd1; --pk-accent-ink: #bab4ff; --pk-focus: #d3cfff; --pk-selection: rgba(141, 132, 255, .4); --pk-glow-lead: #c4bfff; --pk-glow-mid: #8d84ff; --pk-glow-trail: #3329a3; --pk-glow-shadow: rgba(141, 132, 255, .42); --paint-fill: #9a92ff; --paint-on-fill: #0c0838; }
:root[data-accent="orchid"] { --pk-accent: #c46bd6; --pk-accent-strong: #8a2f9f; --pk-accent-ink: #e3a9ef; --pk-focus: #f0cdf7; --pk-selection: rgba(196, 107, 214, .4); --pk-glow-lead: #e8b6f2; --pk-glow-mid: #c46bd6; --pk-glow-trail: #6a1f7c; --pk-glow-shadow: rgba(196, 107, 214, .42); --paint-fill: #cf7ce0; --paint-on-fill: #240630; }
:root[data-look="matinee"] { --pk-accent: #b3243b; --pk-accent-strong: #a33246; --pk-accent-ink: #962035; --pk-focus: #6b1424; --pk-selection: rgba(179, 36, 59, .26); --pk-glow-lead: #e08a98; --pk-glow-mid: #b3243b; --pk-glow-trail: #7a1626; --pk-glow-shadow: rgba(179, 36, 59, .3); --paint-fill: #b3243b; --paint-on-fill: #ffffff; }
:root[data-look="matinee"][data-accent="vermilion"] { --pk-accent: #b32d19; --pk-accent-strong: #b0301d; --pk-accent-ink: #9a2716; --pk-focus: #6a1a0e; --pk-selection: rgba(179, 45, 25, .26); --pk-glow-lead: #e6907f; --pk-glow-mid: #b32d19; --pk-glow-trail: #7a1a0c; --pk-glow-shadow: rgba(179, 45, 25, .3); --paint-fill: #b32d19; --paint-on-fill: #ffffff; }
:root[data-look="matinee"][data-accent="marigold"] { --pk-accent: #8a5805; --pk-accent-strong: #8f5a0a; --pk-accent-ink: #774a03; --pk-focus: #4f3002; --pk-selection: rgba(138, 88, 5, .26); --pk-glow-lead: #d6a24a; --pk-glow-mid: #8a5805; --pk-glow-trail: #5e3a02; --pk-glow-shadow: rgba(138, 88, 5, .3); --paint-fill: #8a5805; --paint-on-fill: #ffffff; }
:root[data-look="matinee"][data-accent="indigo"] { --pk-accent: #4a3fd1; --pk-accent-strong: #4a3fd1; --pk-accent-ink: #3b31b3; --pk-focus: #271f80; --pk-selection: rgba(74, 63, 209, .26); --pk-glow-lead: #9088e8; --pk-glow-mid: #4a3fd1; --pk-glow-trail: #2b2290; --pk-glow-shadow: rgba(74, 63, 209, .3); --paint-fill: #4a3fd1; --paint-on-fill: #ffffff; }
:root[data-look="matinee"][data-accent="orchid"] { --pk-accent: #8a2f9f; --pk-accent-strong: #8a2f9f; --pk-accent-ink: #74258a; --pk-focus: #4d1760; --pk-selection: rgba(138, 47, 159, .26); --pk-glow-lead: #c58bd3; --pk-glow-mid: #8a2f9f; --pk-glow-trail: #5a1b6b; --pk-glow-shadow: rgba(138, 47, 159, .3); --paint-fill: #8a2f9f; --paint-on-fill: #ffffff; }
/* paint:generated accents end */

/* paint:generated stages begin (node scripts/paint-assets.mjs; edit STAGES there) */
:root[data-look="matinee"] .pk-studio,
:root[data-look="matinee"] .pk-sc,
:root[data-look="matinee"] .pk-cl,
:root[data-look="matinee"] .pk-dial,
:root[data-look="matinee"] .pk-media-editor,
:root[data-look="matinee"] .pk-composer-takeover,
:root[data-look="matinee"] .pk-call-overlay,
:root[data-look="matinee"] .pk-viewer,
:root[data-look="matinee"] .pk-inline-auth {
  --pk-canvas: #070809; --pk-surface: #121315; --pk-surface-raised: #1a1b1e; --pk-surface-sunken: #0d0e10; --pk-scrim: rgba(3, 3, 7, .72); --pk-line: rgba(236, 231, 235, .16); --pk-line-strong: rgba(236, 231, 235, .4); --pk-ink: #f5f2f1; --pk-muted: #b6b3b5; --pk-faint: #929598; --pk-on-accent: #ffffff; --pk-heart: #ec6677; --pk-good: #9cf2c4; --pk-good-line: rgba(156, 242, 196, .4); --pk-good-tint: rgba(156, 242, 196, .1); --pk-warn: #ffd08a; --pk-warn-line: rgba(255, 208, 138, .4); --pk-warn-tint: rgba(255, 208, 138, .1); --pk-error: #f2a595; --pk-error-line: rgba(242, 165, 149, .45); --pk-error-tint: rgba(242, 165, 149, .1); --pk-info: #b9ccff; --pk-info-line: rgba(185, 204, 255, .4); --pk-info-tint: rgba(185, 204, 255, .1); --fs-ink: #F3EFEA; --fs-ink-2: rgba(255, 255, 255, .68); --fs-ink-3: rgba(255, 255, 255, .48); --fs-ground: #0B0B0D; --fs-glass: rgba(16, 16, 20, .52); --fs-glass-strong: rgba(12, 12, 15, .74); --fs-glass-solid: #131316; --fs-line: rgba(255, 255, 255, .11); --fs-line-strong: rgba(255, 255, 255, .20); --fs-shadow: 0 18px 44px rgba(0, 0, 0, .26); --fs-good-label: #9CF2C4; --fs-warn-label: #FFD08A; --fs-danger-label: #FFB0A6; --fs-info-label: #B9CCFF; color-scheme: dark; --pk-accent: #d75765; --pk-accent-strong: #a33246; --pk-accent-ink: #ef94a2; --pk-focus: #e9b7c7; --pk-selection: rgba(215, 87, 101, .4); --pk-glow-lead: #f2a3b1; --pk-glow-mid: #d75765; --pk-glow-trail: #8f2236; --pk-glow-shadow: rgba(215, 87, 101, .42); --paint-fill: #ee6b7b; --paint-on-fill: #1d070c;
}
:root[data-look="matinee"][data-accent="vermilion"] .pk-studio,
:root[data-look="matinee"][data-accent="vermilion"] .pk-sc,
:root[data-look="matinee"][data-accent="vermilion"] .pk-cl,
:root[data-look="matinee"][data-accent="vermilion"] .pk-dial,
:root[data-look="matinee"][data-accent="vermilion"] .pk-media-editor,
:root[data-look="matinee"][data-accent="vermilion"] .pk-composer-takeover,
:root[data-look="matinee"][data-accent="vermilion"] .pk-call-overlay,
:root[data-look="matinee"][data-accent="vermilion"] .pk-viewer,
:root[data-look="matinee"][data-accent="vermilion"] .pk-inline-auth {
  --pk-accent: #f2634d; --pk-accent-strong: #b8321f; --pk-accent-ink: #ff9d8a; --pk-focus: #ffc1b4; --pk-selection: rgba(242, 99, 77, .4); --pk-glow-lead: #ffb3a5; --pk-glow-mid: #f2634d; --pk-glow-trail: #9a2616; --pk-glow-shadow: rgba(242, 99, 77, .42); --paint-fill: #ff5a45; --paint-on-fill: #1f0a06;
}
:root[data-look="matinee"][data-accent="marigold"] .pk-studio,
:root[data-look="matinee"][data-accent="marigold"] .pk-sc,
:root[data-look="matinee"][data-accent="marigold"] .pk-cl,
:root[data-look="matinee"][data-accent="marigold"] .pk-dial,
:root[data-look="matinee"][data-accent="marigold"] .pk-media-editor,
:root[data-look="matinee"][data-accent="marigold"] .pk-composer-takeover,
:root[data-look="matinee"][data-accent="marigold"] .pk-call-overlay,
:root[data-look="matinee"][data-accent="marigold"] .pk-viewer,
:root[data-look="matinee"][data-accent="marigold"] .pk-inline-auth {
  --pk-accent: #e9a23b; --pk-accent-strong: #8f5a0a; --pk-accent-ink: #f6c476; --pk-focus: #ffdca0; --pk-selection: rgba(233, 162, 59, .38); --pk-glow-lead: #f9d089; --pk-glow-mid: #e9a23b; --pk-glow-trail: #8a5508; --pk-glow-shadow: rgba(233, 162, 59, .4); --paint-fill: #f2aa3f; --paint-on-fill: #221303;
}
:root[data-look="matinee"][data-accent="indigo"] .pk-studio,
:root[data-look="matinee"][data-accent="indigo"] .pk-sc,
:root[data-look="matinee"][data-accent="indigo"] .pk-cl,
:root[data-look="matinee"][data-accent="indigo"] .pk-dial,
:root[data-look="matinee"][data-accent="indigo"] .pk-media-editor,
:root[data-look="matinee"][data-accent="indigo"] .pk-composer-takeover,
:root[data-look="matinee"][data-accent="indigo"] .pk-call-overlay,
:root[data-look="matinee"][data-accent="indigo"] .pk-viewer,
:root[data-look="matinee"][data-accent="indigo"] .pk-inline-auth {
  --pk-accent: #8d84ff; --pk-accent-strong: #4a3fd1; --pk-accent-ink: #bab4ff; --pk-focus: #d3cfff; --pk-selection: rgba(141, 132, 255, .4); --pk-glow-lead: #c4bfff; --pk-glow-mid: #8d84ff; --pk-glow-trail: #3329a3; --pk-glow-shadow: rgba(141, 132, 255, .42); --paint-fill: #9a92ff; --paint-on-fill: #0c0838;
}
:root[data-look="matinee"][data-accent="orchid"] .pk-studio,
:root[data-look="matinee"][data-accent="orchid"] .pk-sc,
:root[data-look="matinee"][data-accent="orchid"] .pk-cl,
:root[data-look="matinee"][data-accent="orchid"] .pk-dial,
:root[data-look="matinee"][data-accent="orchid"] .pk-media-editor,
:root[data-look="matinee"][data-accent="orchid"] .pk-composer-takeover,
:root[data-look="matinee"][data-accent="orchid"] .pk-call-overlay,
:root[data-look="matinee"][data-accent="orchid"] .pk-viewer,
:root[data-look="matinee"][data-accent="orchid"] .pk-inline-auth {
  --pk-accent: #c46bd6; --pk-accent-strong: #8a2f9f; --pk-accent-ink: #e3a9ef; --pk-focus: #f0cdf7; --pk-selection: rgba(196, 107, 214, .4); --pk-glow-lead: #e8b6f2; --pk-glow-mid: #c46bd6; --pk-glow-trail: #6a1f7c; --pk-glow-shadow: rgba(196, 107, 214, .42); --paint-fill: #cf7ce0; --paint-on-fill: #240630;
}
/* paint:generated stages end */