/* PANEL design tokens. Single source of truth for both surfaces
 * (participant survey + researcher studio) in light and dark.
 *
 * Per-study branding overrides exactly one variable: --we-primary
 * (injected by templates/base.html). Every accent tint derives from it
 * via color-mix, so a one-line override restyles the whole page.
 */

:root {
  color-scheme: light dark;

  /* color — light */
  --we-bg: #f7f8f8;
  --we-surface: #ffffff;
  --we-surface-2: #f1f3f3;
  --we-border: #e3e6e6;
  --we-border-strong: #cfd4d4;
  --we-text: #131a1a;
  --we-text-muted: #55605f;
  --we-text-faint: #94a09f;

  /* accent — a scientific teal (seed = teal-600). One override rebrands. */
  --we-primary: #0d9488;
  --we-primary-strong: #0f766e;
  --we-primary-contrast: #ffffff;
  --we-primary-hover: color-mix(in srgb, var(--we-primary) 88%, black);
  --we-primary-soft: color-mix(in srgb, var(--we-primary) 10%, var(--we-surface));
  --we-primary-border: color-mix(in srgb, var(--we-primary) 32%, var(--we-border));
  --we-primary-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--we-primary) 82%, white),
    var(--we-primary)
  );
  --we-primary-glow: color-mix(in srgb, var(--we-primary) 28%, transparent);

  --we-danger: #dc2626;
  --we-danger-soft: #fef2f2;
  --we-success: #12996b;
  --we-success-soft: #eefaf4;
  --we-warning: #b45309;
  --we-warning-soft: #fffbeb;

  /* type */
  --we-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --we-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
  --we-text-xs: 0.75rem;
  --we-text-sm: 0.875rem;
  --we-text-base: 1rem;
  --we-text-lg: 1.125rem;
  --we-text-xl: 1.375rem;
  --we-text-2xl: 1.75rem;
  --we-text-3xl: 2.25rem;
  --we-leading: 1.6;

  /* space (4px grid) */
  --we-space-1: 0.25rem;
  --we-space-2: 0.5rem;
  --we-space-3: 0.75rem;
  --we-space-4: 1rem;
  --we-space-5: 1.5rem;
  --we-space-6: 2rem;
  --we-space-7: 3rem;
  --we-space-8: 4rem;

  /* radius */
  --we-radius-sm: 6px;
  --we-radius-md: 10px;
  --we-radius-lg: 14px;
  --we-radius-full: 999px;

  /* elevation — layered, slightly tinted with the ink colour */
  --we-shadow-sm: 0 1px 2px rgb(15 30 30 / 0.06);
  --we-shadow-md: 0 4px 12px -2px rgb(15 30 30 / 0.10),
    0 2px 4px -2px rgb(15 30 30 / 0.06);
  --we-shadow-lg: 0 12px 32px -8px rgb(15 30 30 / 0.16);

  /* motion */
  --we-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --we-transition: 160ms var(--we-ease);

  --we-focus-ring: 0 0 0 3px var(--we-primary-glow);
  --we-z-nav: 100;
  --we-z-tooltip: 200;
}

@media (prefers-color-scheme: dark) {
  :root {
    --we-bg: #0c1211;
    --we-surface: #131a19;
    --we-surface-2: #1b2423;
    --we-border: #263130;
    --we-border-strong: #37413f;
    --we-text: #e9eeed;
    --we-text-muted: #9aa6a4;
    --we-text-faint: #667170;

    --we-primary: #2dd4bf;
    --we-primary-strong: #5eead4;
    --we-primary-contrast: #06201d;
    --we-primary-hover: color-mix(in srgb, var(--we-primary) 88%, white);
    --we-primary-soft: color-mix(in srgb, var(--we-primary) 15%, var(--we-surface));
    --we-primary-border: color-mix(in srgb, var(--we-primary) 36%, var(--we-border));
    --we-primary-gradient: linear-gradient(
      135deg,
      color-mix(in srgb, var(--we-primary) 78%, white),
      var(--we-primary)
    );
    --we-primary-glow: color-mix(in srgb, var(--we-primary) 32%, transparent);

    --we-danger: #f87171;
    --we-danger-soft: #2a1616;
    --we-success: #34d399;
    --we-success-soft: #10261e;
    --we-warning: #fbbf24;
    --we-warning-soft: #2a2210;

    --we-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --we-shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.5);
    --we-shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}