/* PTT design tokens, copied from the website's design system
   (build/site/mu-plugins/ptt-site/ptt.css, body.pt-site). Keep the two in step. */
:root {
	--pt-ink: #0b1b33;
	--pt-navy: #0b2545;
	--pt-navy-2: #12325c;
	--pt-deep: #081a31;
	--pt-blue: #1565d8;
	--pt-blue-hi: #0f56bd;
	--pt-sky: #42bdf2;
	--pt-cyan: #13c3ef;
	--pt-coral: #ff6b4a;
	--pt-coral-hi: #ff8466;
	--pt-paper: #f5f8fc;
	--pt-white: #ffffff;
	--pt-muted: #4d5e76;
	--pt-muted-d: #b9c8da;
	--pt-line: #dbe6f1;
	--pt-display: "Poppins", "Segoe UI", system-ui, sans-serif;
	--pt-body: "Comic Neue", "Comic Sans MS", "Chalkboard SE", ui-rounded, system-ui, sans-serif;
	--pt-cjk: "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans", sans-serif;
	--pt-radius: 22px;
	--pt-shadow: 0 18px 45px rgba(11, 61, 102, .12);

	/* app-only */
	--screen-bg: #eef3f9;
	--bubble-me: #e4efff;
	--warm: #fff1ec;
	--warm-ink: #b4380f;
	--cool: #eaf2fe;
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-t: env(safe-area-inset-top, 0px);

	/* What the app paints with. Light uses the brand tokens above; dark (below) swaps only these. The brand tokens
	   stay as they are for colored buttons and the text on them. */
	color-scheme: light;
	--surface: var(--pt-white);      /* bars, cards, sheets, bubbles */
	--paper: var(--pt-paper);        /* the page behind cards; fills inside them */
	--heading: var(--pt-navy);       /* names, titles, labels */
	--text: var(--pt-ink);           /* body and message text */
	--muted: var(--pt-muted);
	--line: var(--pt-line);
	--accent: var(--pt-blue);        /* blue text, icons and outlines */
	--solid: var(--pt-navy);         /* dark buttons: Play, Jump, toasts */
	--switch-off: #c9d6e6;
	--veil: rgba(255, 255, 255, .75); /* chips over the chat background */
	--pill-bg: #f2f7fe;
	--pill-line: #cfe0f7;
	--notice: #fff7e0;
	--notice-ink: #8a5a00;
	--bad: #c43a1a;
	--good: #1c7a3c;
	--drop-bg: rgba(234, 242, 254, .92);
	--warm-icon: #d24a26;
	--warm-line: #f3b9a6;

	/* Theme colors (Display → Theme, js/look.js). These are PTT's own; a theme replaces them, with the ones above.
	   Filled things (buttons, switches, Send) use --fill with --on-fill on top; the mic, new messages and the
	   location pin use --hl with --on-hl. */
	--fill: var(--pt-blue);
	--fill-hi: var(--pt-blue-hi);
	--fill-2: var(--pt-cyan);        /* the other end of the empty chat screen's badge */
	--on-fill: var(--pt-white);
	--hl: var(--pt-coral);
	--on-hl: var(--pt-white);
	--hl-soft: #f2a08c;              /* the mic while paused */
	--hl-voice: #e0402a;             /* the mic while it hears a voice */
	--bubble-them: var(--surface);   /* other people's messages (yours are --bubble-me) */
	--picked: #9cc0f2;               /* the border of a message you tapped */
	--card-a: var(--pt-navy);        /* the join card in the chat list */
	--card-b: var(--pt-navy-2);
	--pat: color-mix(in srgb, var(--text) 9%, transparent);   /* the chat background's pattern */
}

/* Dark (Display → Appearance; Automatic follows the device). js/device.js sets data-theme before the page draws.
   Built on the brand navies, so the dark logo sits on the bars without a box. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--surface: #0b2545;
	--paper: #081a31;
	--screen-bg: #061427;
	--heading: #eaf1fb;
	--text: #dde6f2;
	--muted: #9db0c8;
	--line: #1f3d64;
	--accent: #6cb0ff;
	--solid: #1d4b85;
	--bubble-me: #17426f;
	--cool: #10345f;
	--warm: #3a211d;
	--warm-ink: #ffab94;
	--switch-off: #34506f;
	--veil: rgba(11, 37, 69, .8);
	--pill-bg: #10345f;
	--pill-line: #24507f;
	--notice: #3a2f10;
	--notice-ink: #ffd772;
	--bad: #ff8a70;
	--good: #6fd391;
	--drop-bg: rgba(8, 26, 49, .92);
	--warm-icon: #ff9a80;
	--warm-line: #6b3a2e;
	--pt-shadow: 0 18px 45px rgba(0, 0, 0, .35);
	--picked: #3f6da8;
}