/* Design system tokens — canonical source: docs/design/DESIGN-SYSTEM.md */

:root:not([data-profile]),
:root[data-profile="classic"] {
  /* Color tokens */
  --sq-ink: #161a2e;
  --sq-black: #161a2e;
  --sq-panel: #1c2040;
  --sq-panel-2: #2b2f57;
  --sq-panel-lilac: #4a3f6e;
  --sq-panel-deep: #20233f;
  --sq-red: #e0435c;
  --sq-on-red: #161a2e;
  --sq-gold: #c9973f;
  --sq-on-gold: #161a2e;
  --sq-lilac: #b7a8d6;
  --sq-on-lilac: #161a2e;
  --sq-parchment: #ecdfc0;
  --sq-on-surface: #ecdfc0;
  --sq-on-surface-variant: #b7a8d6;
  --sq-outline: #c9973f;
  --sq-border: #453a22;
  --sq-favorite: #f08a9e;
  --sq-error: #dc5858;
  --sq-error-hover: #d0364e;
}

:root[data-profile="save_point"] {
  --sq-ink: #183a3d;
  --sq-black: #183a3d;
  --sq-panel: #214c4e;
  --sq-panel-2: #356467;
  --sq-panel-lilac: #356467;
  --sq-panel-deep: #183a3d;
  --sq-red: #74e0c1;
  --sq-on-red: #082822;
  --sq-gold: #f38cab;
  --sq-on-gold: #401525;
  --sq-lilac: #b8d8d1;
  --sq-on-lilac: #15312f;
  --sq-parchment: #f2f7f3;
  --sq-on-surface: #f2f7f3;
  --sq-on-surface-variant: #b8d8d1;
  --sq-outline: #8edcc7;
  --sq-border: #527b79;
  --sq-favorite: #f38cab;
  --sq-error: #dc5858;
  --sq-error-hover: #d0364e;
}

:root[data-profile="level_select"] {
  --sq-ink: #202a52;
  --sq-black: #202a52;
  --sq-panel: #2c3768;
  --sq-panel-2: #454f7d;
  --sq-panel-lilac: #454f7d;
  --sq-panel-deep: #202a52;
  --sq-red: #9bb8ff;
  --sq-on-red: #101a3a;
  --sq-gold: #ffc2a8;
  --sq-on-gold: #492014;
  --sq-lilac: #c8c7e8;
  --sq-on-lilac: #242644;
  --sq-parchment: #f4f5ff;
  --sq-on-surface: #f4f5ff;
  --sq-on-surface-variant: #c8c7e8;
  --sq-outline: #aec5ff;
  --sq-border: #6572a0;
  --sq-favorite: #ffc2a8;
  --sq-error: #dc5858;
  --sq-error-hover: #d0364e;
}

:root[data-profile="bonus_stage"] {
  --sq-ink: #321b46;
  --sq-black: #321b46;
  --sq-panel: #45235a;
  --sq-panel-2: #68306c;
  --sq-panel-lilac: #68306c;
  --sq-panel-deep: #321b46;
  --sq-red: #f58bf4;
  --sq-on-red: #39143a;
  --sq-gold: #c8f36b;
  --sq-on-gold: #1b2a08;
  --sq-lilac: #d7b6de;
  --sq-on-lilac: #32183a;
  --sq-parchment: #fff1ff;
  --sq-on-surface: #fff1ff;
  --sq-on-surface-variant: #d7b6de;
  --sq-outline: #f5a7ed;
  --sq-border: #8e578c;
  --sq-favorite: #c8f36b;
  --sq-error: #dc5858;
  --sq-error-hover: #d0364e;
}

:root {
  /* Shape and rhythm tokens */
  --sq-radius-sm: 4px;
  --sq-radius-md: 6px;
  --sq-space-1: 4px;
  --sq-space-2: 8px;
  --sq-space-3: 12px;
  --sq-space-4: 16px;
  --sq-space-6: 24px;

  /* Content widths: one listener shell, with an intentional reading,
     standard, and wide measure. */
  --sq-w-reading: 680px;
  --sq-w-standard: 1200px;
  --sq-w-wide: 1440px;

  /* Type tokens: font families with fallback stacks */
  --app-disp: Anton, "Courier New", monospace;
  --app-body:
    Karla, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  --app-mono: "Space Mono", ui-monospace, "Courier New", monospace;
}

.sq-button--primary,
.sq-button--outline {
  align-items: center;
  border-radius: var(--sq-radius-md);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--app-body);
  font-size: 1.1875rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: var(--sq-space-2) var(--sq-space-4);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sq-button--primary {
  background: var(--sq-red);
  border: 1px solid var(--sq-red);
  color: var(--sq-ink);
}

.sq-button--outline {
  background: transparent;
  border: 1px solid var(--sq-lilac);
  color: var(--sq-lilac);
}

.sq-button--primary:hover:not(:disabled),
.sq-button--outline:hover:not(:disabled) {
  opacity: 0.9;
}

.sq-button--primary:focus-visible,
.sq-button--outline:focus-visible {
  outline: 2px solid var(--sq-gold);
  outline-offset: 2px;
}

.sq-button--primary:disabled {
  background: color-mix(in srgb, var(--sq-lilac) 45%, transparent);
  border-color: transparent;
  color: var(--sq-ink);
  cursor: not-allowed;
  opacity: 1;
}