/*
 * SAVGGO design tokens (FE-A owns this file).
 * This is the ONLY stylesheet allowed to hold literal colors, font stacks,
 * spacing lengths and durations. Every other stylesheet uses var(--token).
 * To restyle the whole product, edit the values in this file.
 */

:root {
  /* Color: surfaces and text */
  --color-bg: #0d1020;
  --color-bg-gradient-a: #1a1446;
  --color-bg-gradient-b: #0d1020;
  --color-surface: #161a33;
  --color-surface-raised: #202547;
  --color-surface-sunken: #0a0c19;
  --color-text: #eef0ff;
  --color-text-muted: #a3a9d1;
  --color-border: #333a6b;
  --color-border-strong: #4c5594;

  /* Color: brand and state */
  --color-accent: #ffc233;
  --color-accent-contrast: #1b1400;
  --color-accent-2: #8a6bff;
  --color-accent-2-contrast: #ffffff;
  --color-success: #3ddc97;
  --color-warning: #ffb020;
  --color-danger: #ff5c7a;
  --color-info: #5cc8ff;
  --color-focus: #7fd4ff;
  --color-scrim: rgba(5, 6, 16, 0.78);
  --color-link: #9fb6ff;

  /* Color: overlay and ranks */
  --color-overlay-bg: transparent;
  --color-rank-1: #ffd24a;
  --color-rank-2: #cfd6ee;
  --color-rank-3: #db9660;

  /* Space */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --page-gutter: 1rem;

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "Avenir Next", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.75rem;
  --text-hero: clamp(2.25rem, 8vw, 4.5rem);
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-caps: 0.08em;

  /* Shape */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 62.5rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 1.5rem rgba(255, 194, 51, 0.25);
  --border-width-thick: 2px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Layout sizes */
  --size-content: 72rem;
  --size-narrow: 40rem;
  --size-medium: 56rem;
  --size-touch: 2.75rem;
  --size-avatar: 2rem;
  --size-avatar-lg: 3rem;
  --size-boxart-card: 9rem;
  --size-boxart-thumb: 3.25rem;
  --size-sidebar: 18rem;
  --size-modal: 28rem;
  --size-toast: 24rem;
  --size-token-field: 22rem;

  /* Layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 480ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasis: cubic-bezier(0.3, 1.4, 0.5, 1);
  --motion-reveal-step: 8s;
  --motion-countdown-tick: 1s;
  --motion-score-tick: 600ms;
  --motion-toast-duration: 4500ms;
  --motion-pulse-duration: 1600ms;
  --motion-sabotage-pick-seconds: 60s;
  --motion-victim-effect: 1800ms;
  --motion-battle-reveal: 2200ms;
  --motion-battle-hold: 3200ms;
  --motion-battle-freeze-tick: 1s;

  /* Battle Mode (contract 4.10.5): risk categories and outcome kinds */
  --color-risk-high: #ff7a45;
  --color-risk-low: #5cc8ff;
  --color-risk-mystery: #b79cff;
  --color-outcome-reward: #3ddc97;
  --color-outcome-punishment: #ff5c7a;
  --color-outcome-nothing: #a3a9d1;

  /* Overlay widget skin (used by the editor preview and the OBS overlay) */
  --overlay-widget-bg: rgba(12, 14, 32, 0.82);
  --overlay-widget-text: #ffffff;
  --overlay-widget-muted: #b9bfe6;
  --overlay-widget-accent: #ffc233;
  --overlay-widget-radius: 0.75rem;
  --overlay-widget-pad: 0.75rem;
  --overlay-widget-gap: 0.375rem;
  --overlay-widget-font-size: 1rem;
  --overlay-widget-border: rgba(255, 255, 255, 0.18);

  /* Editor canvas */
  --editor-canvas-bg: #1c2038;
  --editor-grid-line: rgba(255, 255, 255, 0.06);
  --editor-handle-size: 1rem;
  --editor-selected: #ffc233;
  --editor-snap-px: 10;
}

@media (min-width: 48em) {
  :root {
    --page-gutter: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-pulse-duration: 0ms;
    --motion-battle-reveal: 0ms;
  }
}