/* CK Tasting Session App – design tokens and base styles.
   Source: docs/design-guide.md §3. Change values there and here together. */

:root {
  --brand: #e42313;
  --action: #0957c3;
  --handover: #c51e10;
  --sidebar: #0d202d;
  --sidebar-selected: #184a78;
  --action-hover: #084ba8;
  --action-pressed: #063d8b;
  --selected-bg: #eaf2ff;
  --canvas: #f5f6f8;
  --surface: #fff;
  --surface-subtle: #f9fafb;
  --text: #17212b;
  --text-secondary: #52606d;
  --text-muted: #667085;
  --divider: #e4e7ec;
  --control-border: #7c8796;
  --success: #166534;
  --success-bg: #ecfdf3;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --error: #b42318;
  --error-bg: #fef3f2;
  --info: #175cd3;
  --info-bg: #eff8ff;
  --focus: #175cd3;
  --face-1: #e5484d;
  --face-2: #f08a3c;
  --face-3: #f5c542;
  --face-4: #8fcf5a;
  --face-5: #3fb950;
  --face-ink: #3b2a1a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --shadow-card: 0 2px 8px rgba(16,24,40,.04);
  --shadow-dialog: 0 20px 60px rgba(16,24,40,.18);
  --header-height: 72px;
  --sidebar-width: 232px;
  --control-height: 48px;
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background: var(--canvas);
  font: 400 16px/1.5 var(--font-ui);
}
button, input, select, textarea { font: inherit; }
button { min-height: var(--control-height); }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.button-primary {
  padding: 12px 20px;
  color: #fff;
  background: var(--action);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 600;
}
@media (hover: hover) {
  .button-primary:hover { background: var(--action-hover); }
}
.button-primary:active { background: var(--action-pressed); }
.button-primary:disabled {
  color: var(--text-secondary);
  background: #e4e7ec;
  cursor: not-allowed;
}
.page-content { width: 100%; max-width: 1440px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}