/* ══════════════════════════════════════════════
   Shared Design Tokens — Material Design 3 Expressive
   
   Imported by both site.css (lab site) and style.css (journal SPA).
   Both apps set their own --accent, then these derived tokens re-tone
   the entire UI from that single source color.
   
   DO NOT define --accent, --brand, --headline-size, or --w here —
   those are intentionally different between the lab site and journal.
   ══════════════════════════════════════════════ */

:root {
  /* neutrals tinted by the source accent */
  --bg: color-mix(in srgb, var(--accent) 4%, #ffffff);
  --surface: color-mix(in srgb, var(--accent) 4%, #fdfcff);
  --surface-1: color-mix(in srgb, var(--accent) 6%, #fdfcff);
  --surface-2: color-mix(in srgb, var(--accent) 9%, #fdfcff);
  --surface-3: color-mix(in srgb, var(--accent) 12%, #fdfcff);

  /* on-surface text roles */
  --ink: color-mix(in srgb, var(--accent) 22%, #1b1b1f);
  --ink-soft: color-mix(in srgb, var(--accent) 18%, #303034);
  --muted: color-mix(in srgb, var(--accent) 16%, #5a5a62);
  --outline: color-mix(in srgb, var(--accent) 18%, #c6c5ce);
  --outline-soft: color-mix(in srgb, var(--accent) 10%, #e3e1ea);

  /* primary roles */
  --primary: var(--accent);
  --on-primary: #ffffff;
  --primary-container: color-mix(in srgb, var(--accent) 20%, white);
  --on-primary-container: color-mix(in srgb, var(--accent) 70%, black);

  /* secondary roles */
  --secondary-container: color-mix(in srgb, var(--accent) 16%, white);
  --on-secondary-container: color-mix(in srgb, var(--accent) 72%, black);

  /* state layers */
  --state-hover: color-mix(in srgb, var(--accent) 8%, transparent);
  --state-press: color-mix(in srgb, var(--accent) 12%, transparent);

  /* shape scale */
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-lg: 24px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* elevation */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.08);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);

  /* typography scale */
  --headline-weight: 750;
  --label-size: 0.72rem;
  --label-weight: 700;
  --label-track: 0.08em;

  /* motion — M3 Expressive spring curves */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}