/*
 * WOLF shared design tokens
 *
 * The default scene is the light operations workspace. Public competition
 * pages opt into the navy scene through their existing app-shell class.
 */

:root {
  color-scheme: light;

  /* Brand palette */
  --wolf-navy-950: #081423;
  --wolf-navy-900: #0d1d31;
  --wolf-navy-850: #122640;
  --wolf-navy-800: #19314f;
  --wolf-navy-700: #294867;
  --wolf-navy-600: #3a5d7d;

  --wolf-slate-50: #f7f9fc;
  --wolf-slate-100: #eef3f8;
  --wolf-slate-200: #dce5ef;
  --wolf-slate-300: #c3d0df;
  --wolf-slate-400: #96a9bd;
  --wolf-slate-500: #70859b;
  --wolf-slate-600: #53687d;
  --wolf-slate-700: #394d61;
  --wolf-slate-800: #233548;
  --wolf-slate-900: #152436;

  --wolf-blue-50: #eef6ff;
  --wolf-blue-100: #dcecff;
  --wolf-blue-200: #bddbff;
  --wolf-blue-300: #8fc1ff;
  --wolf-blue-400: #66a5ff;
  --wolf-blue-500: #3f89fa;
  --wolf-blue-600: #256de0;
  --wolf-blue-700: #1e56b8;
  --wolf-blue-800: #214a91;

  --wolf-amber-50: #fff8e8;
  --wolf-amber-100: #ffedbe;
  --wolf-amber-300: #f7cf70;
  --wolf-amber-400: #f2b84b;
  --wolf-amber-500: #d99a25;
  --wolf-amber-700: #925e12;

  --wolf-red-50: #fff1f3;
  --wolf-red-400: #fb7185;
  --wolf-red-600: #dc3452;
  --wolf-green-50: #ecfdf5;
  --wolf-green-400: #45c99a;
  --wolf-green-700: #147556;

  /* Typography */
  --wolf-font-display: "Plus Jakarta Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wolf-font-body: "Noto Sans SC", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wolf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --wolf-font-weight-regular: 400;
  --wolf-font-weight-medium: 500;
  --wolf-font-weight-semibold: 600;
  --wolf-font-weight-bold: 700;
  --wolf-font-weight-extrabold: 800;
  --wolf-font-weight-black: 900;
  --wolf-text-xs: 0.75rem;
  --wolf-text-sm: 0.875rem;
  --wolf-text-md: 1rem;
  --wolf-text-lg: 1.125rem;
  --wolf-text-xl: 1.25rem;
  --wolf-text-2xl: clamp(1.5rem, 1.28rem + 0.7vw, 2rem);
  --wolf-text-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
  --wolf-text-display: clamp(2.25rem, 1.65rem + 2vw, 4rem);
  --wolf-leading-tight: 1.08;
  --wolf-leading-heading: 1.2;
  --wolf-leading-body: 1.65;
  --wolf-tracking-tight: -0.035em;
  --wolf-tracking-label: 0.06em;

  /* Spacing and responsive layout */
  --wolf-space-1: 0.25rem;
  --wolf-space-2: 0.5rem;
  --wolf-space-3: 0.75rem;
  --wolf-space-4: 1rem;
  --wolf-space-5: 1.25rem;
  --wolf-space-6: 1.5rem;
  --wolf-space-8: 2rem;
  --wolf-space-10: 2.5rem;
  --wolf-space-12: 3rem;
  --wolf-space-16: 4rem;
  --wolf-page-gutter: clamp(1rem, 0.55rem + 1.5vw, 2rem);
  --wolf-section-gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  --wolf-content-max: 90rem;
  --wolf-reading-max: 68ch;
  --wolf-grid-card-min: min(100%, 17rem);
  --wolf-control-height: 2.75rem;
  --wolf-touch-target: 2.75rem;

  /* Shape, depth, and motion */
  --wolf-radius-xs: 0.375rem;
  --wolf-radius-sm: 0.5rem;
  --wolf-radius-md: 0.75rem;
  --wolf-radius-lg: 1rem;
  --wolf-radius-xl: 1.375rem;
  --wolf-radius-2xl: 1.75rem;
  --wolf-radius-round: 999px;
  --wolf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --wolf-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.07);
  --wolf-shadow-md: 0 16px 36px rgba(15, 23, 42, 0.1);
  --wolf-shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.14);
  --wolf-duration-fast: 140ms;
  --wolf-duration-base: 200ms;
  --wolf-duration-slow: 320ms;
  --wolf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --wolf-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Light operations scene */
  --wolf-color-canvas: #f4f7fa;
  --wolf-color-surface: #ffffff;
  --wolf-color-surface-raised: #ffffff;
  --wolf-color-surface-subtle: var(--wolf-slate-100);
  --wolf-color-text: #172234;
  --wolf-color-text-muted: #5e6f83;
  --wolf-color-text-soft: #394b60;
  --wolf-color-border: #dfe7ef;
  --wolf-color-border-strong: #c7d4e2;
  --wolf-color-primary: var(--wolf-blue-600);
  --wolf-color-primary-hover: #1d5cc5;
  --wolf-color-primary-soft: var(--wolf-blue-50);
  --wolf-color-highlight: var(--wolf-amber-500);
  --wolf-color-highlight-soft: var(--wolf-amber-50);
  --wolf-color-success: var(--wolf-green-700);
  --wolf-color-success-soft: var(--wolf-green-50);
  --wolf-color-warning: var(--wolf-amber-700);
  --wolf-color-warning-soft: var(--wolf-amber-50);
  --wolf-color-danger: var(--wolf-red-600);
  --wolf-color-danger-soft: var(--wolf-red-50);
  --wolf-focus-color: var(--wolf-blue-500);
  --wolf-focus-width: 3px;
  --wolf-focus-offset: 3px;

  /* Compatibility aliases used by the current server-rendered styles. */
  --bg: var(--wolf-color-canvas);
  --panel: var(--wolf-color-surface);
  --panel-strong: var(--wolf-color-surface-raised);
  --ink: var(--wolf-color-text);
  --muted: var(--wolf-color-text-muted);
  --line: var(--wolf-color-border);
  --accent: var(--wolf-color-primary);
  --accent-strong: var(--wolf-color-primary-hover);
  --accent-soft: var(--wolf-color-primary-soft);
  --gold: var(--wolf-color-highlight);
  --danger: var(--wolf-color-danger);
  --shadow: var(--wolf-shadow-md);
  --heading-font: var(--wolf-font-display);
  --body-font: var(--wolf-font-body);
  --radius-md: var(--wolf-radius-lg);
  --radius-lg: var(--wolf-radius-xl);
  --radius-xl: var(--wolf-radius-2xl);
}

/* Dark navy competition scene. Existing public pages opt in via this class. */
:where(.competitions-app-shell, [data-wolf-scene="public"], .wolf-public-theme) {
  color-scheme: dark;
  --wolf-color-canvas: var(--wolf-navy-950);
  --wolf-color-surface: rgba(25, 49, 79, 0.78);
  --wolf-color-surface-raised: rgba(36, 66, 101, 0.9);
  --wolf-color-surface-subtle: rgba(94, 130, 168, 0.18);
  --wolf-color-text: #f4f8ff;
  --wolf-color-text-muted: #bdccdc;
  --wolf-color-text-soft: #dce8f5;
  --wolf-color-border: rgba(184, 211, 239, 0.24);
  --wolf-color-border-strong: rgba(143, 193, 255, 0.48);
  --wolf-color-primary: var(--wolf-blue-400);
  --wolf-color-primary-hover: var(--wolf-blue-300);
  --wolf-color-primary-active: var(--wolf-blue-500);
  --wolf-color-primary-soft: rgba(102, 165, 255, 0.18);
  --wolf-color-highlight: var(--wolf-amber-400);
  --wolf-color-highlight-soft: rgba(242, 184, 75, 0.16);
  --wolf-color-success: #63d8ad;
  --wolf-color-success-soft: rgba(69, 201, 154, 0.15);
  --wolf-color-warning: #ffd579;
  --wolf-color-warning-soft: rgba(242, 184, 75, 0.16);
  --wolf-color-danger: #ff8096;
  --wolf-color-danger-soft: rgba(251, 113, 133, 0.16);
  --wolf-focus-color: #8fd3ff;
  --wolf-shadow-xs: 0 1px 2px rgba(2, 9, 20, 0.24);
  --wolf-shadow-sm: 0 10px 24px rgba(2, 9, 20, 0.24);
  --wolf-shadow-md: 0 20px 44px rgba(2, 9, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --wolf-shadow-lg: 0 28px 64px rgba(2, 9, 20, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --bg: var(--wolf-color-canvas);
  --panel: var(--wolf-color-surface);
  --panel-strong: var(--wolf-color-surface-raised);
  --ink: var(--wolf-color-text);
  --muted: var(--wolf-color-text-muted);
  --line: var(--wolf-color-border);
  --accent: var(--wolf-color-primary);
  --accent-strong: var(--wolf-color-primary-active);
  --accent-soft: var(--wolf-color-primary-soft);
  --gold: var(--wolf-color-highlight);
  --danger: var(--wolf-color-danger);
  --shadow: var(--wolf-shadow-md);
  --heading-font: var(--wolf-font-display);
  --body-font: var(--wolf-font-body);
}

/* Explicit hook for the light staff scene when the token sheet is shared. */
:where([data-wolf-scene="workspace"], .wolf-workspace-theme) {
  color-scheme: light;
}

/* Small, reusable layout primitives that stay safe inside grid/flex parents. */
.wolf-container {
  inline-size: min(100%, var(--wolf-content-max));
  margin-inline: auto;
  padding-inline: var(--wolf-page-gutter);
}

.wolf-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--wolf-grid-card-min), 1fr));
  gap: var(--wolf-section-gap);
}

.wolf-scroll-region {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.competitions-app-shell) :where(main, section, article, aside, header, footer, nav, div) {
  min-inline-size: 0;
}

:where(.competitions-app-shell) :where(img, svg, video, canvas) {
  max-inline-size: 100%;
}

body.competitions-app-shell :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-wolf-scene="workspace"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wolf-workspace-theme :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--wolf-focus-width) solid var(--wolf-focus-color);
  outline-offset: var(--wolf-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wolf-duration-fast: 0.01ms;
    --wolf-duration-base: 0.01ms;
    --wolf-duration-slow: 0.01ms;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}