/* Hallmark · macrostructure: Lobby Split-Rail · tone: playful-editorial
 * genre: editorial · theme: Playful Classroom (custom — bright paper / ink / sticker)
 * accent: learning-blue ~6% surface · display: humanist system stack · states: 8/8
 * Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4
 *
 * Palette source: ui-ux-pro-max colors.csv, "Kids Learning (ABC & Math)" —
 *   primary #2563EB · secondary #F59E0B · accent #EC4899 · background #EFF6FF
 * Notes in the CSV: "learning blue + play yellow + fun pink".
 *
 * The product is a class lobby where the same people talk every day, so the
 * palette has to survive being looked at for a whole term. That is why the
 * background stays near-neutral (#FFFDF7, not the CSV's #EFF6FF): a fully
 * blue-washed page makes four hours of chat feel like an exam. The playfulness
 * lives in the *objects* — an amber highlighter on announcements, a pink
 * sticker on the superadmin, a blue pen everywhere else.
 *
 * Documented deviations from the CSV:
 *   1. background #EFF6FF → #FFFDF7. Blue wash is exhausting at full screen;
 *      paper stays paper. The tint moves into --color-surface-2 instead.
 *   2. foreground #0F172A kept, but --color-ink-faint → #5B6472: the CSV has no
 *      faint step and timestamps still have to clear 4.5:1 on the new paper.
 *   3. The CSV gives #EC4899 as a flat accent. Used for text it is 3.5:1, so it
 *      is a *fill* here (superadmin sticker) with ink on it: 5.06:1.
 */

/* ============================================================================
   class67 lobby — portable design tokens
   Art direction: a bright sheet of paper on a classroom desk, with a highlighter,
   a pink sticker and a blue pen. Every colour and font in style.css resolves
   through a token declared here.
   ========================================================================== */

:root {
  /* ---- surface / paper ------------------------------------------------ */
  --color-paper: #fffdf7;
  --color-surface: #ffffff;
  --color-surface-2: #f3f6ff;
  --color-surface-3: #e8eefb;

  /* ---- ink ------------------------------------------------------------ */
  --color-ink: #0f172a;
  --color-ink-dim: #475569;
  --color-ink-faint: #5b6472;

  /* ---- accent: the blue pen ------------------------------------------- */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #edf2ff;
  --color-on-accent: #ffffff;

  /* ---- marker: announcements only ------------------------------------- */
  /* the fill is the CSV's #F59E0B; --color-marker-edge is the same hue one
     shade deeper, so the note's outline clears 3:1 on paper (WCAG 1.4.11 —
     the edge of a filled shape has to be perceivable) */
  --color-marker: #f59e0b;
  --color-marker-soft: #fde68a;
  --color-marker-edge: #d97706;
  --color-on-marker: #422006;
  --color-tape: #fb923c;

  /* ---- sticker: the superadmin seat ----------------------------------- */
  /* pink is the one saturated colour on the page, and it appears exactly once:
     the person who can hand the room to somebody else. */
  --color-badge-super: #ec4899;
  --color-on-badge-super: #0f172a;

  /* ---- semantic ------------------------------------------------------- */
  --color-danger: #b91c1c;
  --color-danger-soft: #fee2e2;
  --color-ok: #15803d;

  --color-line: #e7ecf7;
  /* boundary of *interactive* controls (inputs, chips, composer, menu) — 3:1 */
  --color-line-strong: #6b7688;
  --color-focus: var(--color-accent);
  --color-scrim: rgba(15, 23, 42, .42);
  --color-toast: #0f172a;
  --color-on-toast: #fffdf7;
  --color-avatar-ink: #ffffff;

  /* ---- spacing (4pt scale) -------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* ---- radii ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-lift: 0 12px 32px rgba(15, 23, 42, .16);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .07);

  /* ---- type ----------------------------------------------------------- */
  --font-ui: "PingFang TC", "PingFang SC", "Hiragino Sans GB", "Noto Sans TC",
    "Noto Sans SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
    "Noto Sans Mono", monospace;

  --text-base: 15px;
  --text-message: 15px;
  --text-input: 16px;
  --text-sm: 14px;
  --text-xs: 13px;
  --text-2xs: 12px;
  --text-3xs: 11px;
  --leading-body: 1.55;
  --leading-message: 1.6;

  /* ---- motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(.32, .72, .28, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;
  /* a small overshoot, for things that *land*: a sent message, a sticker
     appearing. Not for focus rings, not for layout. */
  --ease-fun: cubic-bezier(.34, 1.4, .64, 1);

  /* ---- layout --------------------------------------------------------- */
  --rail-width: 284px;
  --rail-width-mobile: 272px;
  --composer-height: 92px;
}

[data-theme="dark"] {
  /* a classroom with the lights off, not a different product */
  --color-paper: #0e1320;
  --color-surface: #161d2e;
  --color-surface-2: #1e2739;
  --color-surface-3: #26314a;

  --color-ink: #e9eef8;
  --color-ink-dim: #b6c0d2;
  --color-ink-faint: #94a0b8;

  --color-accent: #7da9ff;
  --color-accent-hover: #9dbeff;
  --color-accent-soft: #1b2a47;
  --color-on-accent: #0b1220;

  --color-marker: #fbbf24;
  --color-marker-soft: #3a2e10;
  --color-marker-edge: #b4831a;
  --color-on-marker: #fde68a;
  /* the tape has to be visible ON the note it holds up: 1.46:1 was a black bar */
  --color-tape: #7c5a18;

  --color-badge-super: #f472b6;
  --color-on-badge-super: #2a0e1c;

  --color-danger: #ff8a80;
  --color-danger-soft: #3a1c1c;
  --color-ok: #4ade80;

  --color-line: #232c3f;
  --color-line-strong: #6b7a94;
  --color-scrim: rgba(0, 0, 0, .6);
  --color-toast: #e9eef8;
  --color-on-toast: #0e1320;

  --shadow-lift: 0 14px 36px rgba(0, 0, 0, .55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .45);
}