/* Last web theme for the Wisepunk design system (vendored as /wisepunk.css).
   Structure (type ramp, spacing, radii, sizes, motion) comes from Wisepunk unchanged.
   This file is the only place Last web colours are defined. Contrast is enforced by
   test/theme.test.js with Wisepunk's rules. Authority: /DESIGN.md.
   Use: <html data-theme="lastweb">. Selectors use :root[…] so they outrank legacy :root rules. Follows the OS scheme; data-scheme="light|dark" forces one. */

:root[data-theme="lastweb"] {
  --bg: #f7f7f8;
  --bg-secondary: #efeff1;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #17171a;
  --text-secondary: #5c5c63;
  --text-tertiary: #83838b;
  --separator: #e4e4e7;
  --border: #cdcdd3;
  --accent: #1f5fd6;
  --on-accent: #ffffff;
  --link: #1a56c4;
  --danger: #c0271b;
  --warning: #a14f00;
  --success: #1f7a3a;
  --decor-hero: none;
  --edge: rgb(0 0 0 / 0.06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="lastweb"]:not([data-scheme="light"]) {
    --bg: #18181a;
    --bg-secondary: #111113;
    --surface: #1f1f22;
    --surface-raised: #28282c;
    --text: #eeeef0;
    --text-secondary: #a4a4ac;
    --text-tertiary: #7a7a82;
    --separator: #2c2c30;
    --border: #3c3c42;
    --accent: #2f6be6;
    --on-accent: #ffffff;
    --link: #7fb0ff;
    --danger: #ff7b70;
    --warning: #ffb454;
    --success: #4fd07c;
    --edge: rgb(255 255 255 / 0.08);
    color-scheme: dark;
  }
}

:root[data-theme="lastweb"][data-scheme="dark"] {
  --bg: #18181a;
  --bg-secondary: #111113;
  --surface: #1f1f22;
  --surface-raised: #28282c;
  --text: #eeeef0;
  --text-secondary: #a4a4ac;
  --text-tertiary: #7a7a82;
  --separator: #2c2c30;
  --border: #3c3c42;
  --accent: #2f6be6;
  --on-accent: #ffffff;
  --link: #7fb0ff;
  --danger: #ff7b70;
  --warning: #ffb454;
  --success: #4fd07c;
  --edge: rgb(255 255 255 / 0.08);
  color-scheme: dark;
}

/* Derived roles, recomputed from whichever palette is active. Same formulas as Wisepunk. */
:root[data-theme="lastweb"] {
  --font-display: var(--font-display-default);
  --surface-hover: color-mix(in srgb, var(--text) 5%, var(--surface));
  --surface-pressed: color-mix(in srgb, var(--text) 9%, var(--surface));
  --surface-selected: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --fill: color-mix(in srgb, var(--text) 6%, var(--surface));
  --fill-strong: color-mix(in srgb, var(--text) 11%, var(--surface));
  --material: color-mix(in srgb, var(--bg) 78%, transparent);
  --material-thick: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  --focus: var(--accent);
}

/* Legacy --lw-* roles point at the theme, so older shared components (sign-in dialog,
   lw-button, lw-brand) render in the same palette on pages that opt in. :root[…] outranks
   the :root definitions in design-system.css. Do not add new --lw-* colour roles. */
:root[data-theme="lastweb"] {
  --lw-font: var(--font-ui);
  --lw-body-font: var(--font-ui);
  --lw-canvas: var(--bg);
  --lw-background: var(--bg);
  --lw-surface: var(--surface);
  --lw-white: var(--surface);
  --lw-panel: var(--surface);
  --lw-raised: var(--fill);
  --lw-control: var(--fill);
  --lw-hover: var(--fill-strong);
  --lw-ink: var(--text);
  --lw-text: var(--text);
  --lw-secondary: var(--text-secondary);
  --lw-muted: var(--text-secondary);
  --lw-line: var(--separator);
  --lw-control-border: var(--border);
  --lw-accent: var(--accent);
  --lw-on-accent: var(--on-accent);
  --lw-accent-surface: var(--surface-selected);
  --lw-glass: var(--material-thick);
  --lw-danger: var(--danger);
  --lw-danger-surface: color-mix(in srgb, var(--danger) 10%, var(--surface));
  --lw-success: var(--success);
  --lw-success-surface: color-mix(in srgb, var(--success) 10%, var(--surface));
  --lw-warning: var(--warning);
  --lw-warning-surface: color-mix(in srgb, var(--warning) 10%, var(--surface));
  --lw-backdrop: var(--scrim);
  --lw-shadow: var(--elevation-2);
  --lw-radius-control: var(--radius-control);
  --lw-radius-panel: var(--radius-group);
  --lw-radius-sheet: var(--radius-sheet);
}