/* Creator components consume the --cr-* semantic namespace defined here. Values resolve
   to the Studio design system's --st-* palette, type, density, and motion roles so both
   namespaces have one visual authority and no component invents its own colour. */
:root{
  --cr-bg-card: var(--st-surface-1);
  --cr-bg-hover: var(--st-surface-2);

  --cr-bg-sidebar: var(--st-chrome-sidebar);
  --cr-bg-header: var(--st-chrome-header);
  --cr-bg-surface: var(--st-surface-1);
  --cr-bg-surface-strong: var(--st-surface-2);

  --cr-bg-tertiary: var(--cr-bg-surface-strong);

  --cr-border: var(--st-rule);
  --cr-border2: var(--st-amethyst-line);
  --cr-border3: var(--st-rule-strong);
  --cr-border-soft: var(--st-rule-soft);

  --cr-text: var(--st-text);
  --cr-text-strong: var(--st-text);
  --cr-text-muted: var(--st-text-muted);
  --cr-text-dim: var(--st-text-dim);
  --cr-text-faint: var(--st-text-faint);

  --cr-primary-2: var(--st-primary);

  /* The names below were referenced before they were defined (the Story
     Director rule and the publication tracker clearance). Define them once
     here instead of falling back inline. The character library focus ring
     reads the canonical --st-primary role directly (BUG-5104). */

  --cr-accent: var(--st-amethyst);

  --cr-pubtrack-clearance: 0px;

  --cr-primary-hover: var(--st-amethyst-deep);

  --cr-primary-light: var(--cr-primary-bg-soft);

  --cr-primary-dim: rgba(var(--cr-primary-rgb), 0.72);

  /* Retired: was a blue info tint. Info is brand-coloured now. */
  --cr-info-bg: rgba(var(--cr-primary-rgb),0.12);

  --cr-primary-border: rgba(var(--cr-primary-rgb),0.22);
  --cr-primary-border-strong: rgba(var(--cr-primary-rgb),0.35);
  --cr-primary-border-medium: rgba(var(--cr-primary-rgb),0.30);
  --cr-primary-border-focus: rgba(var(--cr-primary-rgb),0.45);
  --cr-primary-bg: rgba(var(--cr-primary-rgb),0.22);
  --cr-primary-bg-soft: rgba(var(--cr-primary-rgb),0.12);
  --cr-primary-bg-xsoft: rgba(var(--cr-primary-rgb),0.08);
  --cr-primary-bg-xxsoft: rgba(var(--cr-primary-rgb),0.06);
  --cr-primary-bg-light: rgba(var(--cr-primary-rgb),0.15);
  --cr-primary-bg-faint: rgba(var(--cr-primary-rgb),0.05);
  --cr-primary-bg-medium: rgba(var(--cr-primary-rgb),0.18);
  --cr-primary-bg-hover: rgba(var(--cr-primary-rgb),0.30);
  --cr-secondary-bg-soft: var(--st-ember-wash);

  --cr-brand-grad-1: rgba(var(--cr-primary-rgb),0.35);
  --cr-brand-grad-2: rgba(var(--cr-ember-rgb),0.22);
  --cr-brand-border: rgba(var(--cr-primary-rgb),0.25);
  --cr-brand-border-light: rgba(var(--cr-primary-rgb),0.20);

  /* Success is verdigris — aged bronze/patina, not a UI-kit green. */
  --cr-success-text: var(--st-positive);
  --cr-success-border: var(--st-verdigris-line);
  --cr-success-bg: var(--st-verdigris-wash);
  --cr-success-bg-soft: rgba(var(--cr-verdigris-rgb),0.07);

  /* Warning is ember — candlelight, not a UI-kit orange. */
  --cr-warning-text: var(--st-secondary);
  --cr-warning-border: var(--st-ember-line);
  --cr-warning-bg: var(--st-ember-wash);
  --cr-warning-bg-soft: rgba(var(--cr-ember-rgb),0.07);

  --cr-error-text: var(--st-danger);
  --cr-error-border: var(--st-error-line);
  --cr-error-bg: var(--st-error-wash);
  --cr-error-bg-soft: rgba(var(--cr-error-rgb),0.06);

  --cr-text-icon: var(--st-text-faint);
  --cr-text-cover: var(--st-text-muted);
  --cr-text-soft: var(--st-text-muted);
  --cr-text-white: var(--st-text);

  --cr-overlay-dark: rgba(0,0,0,0.22);
  --cr-overlay-darker: rgba(0,0,0,0.25);
  --cr-overlay-inset: rgba(0,0,0,0.2);
  --cr-overlay-light: rgba(0,0,0,0.4);
  --cr-overlay-heavy: rgba(0,0,0,0.6);

  --cr-card-bg: var(--st-surface-1);
  --cr-card-bg-light: var(--st-surface-2);
  --cr-card-border: var(--st-rule);
  --cr-input-bg: var(--st-well);
  --cr-bg-muted: var(--st-surface-2);

  --cr-error-light: #f0999b;
  --cr-error-bg-light: rgba(var(--cr-error-rgb),0.10);

  --cr-brand-grad-primary: linear-gradient(135deg, var(--st-primary), var(--st-amethyst-deep));
  --cr-brand-grad-radial-1: rgba(var(--cr-primary-rgb),0.18);
  --cr-brand-grad-radial-2: rgba(var(--cr-ember-rgb),0.12);

  --cr-transition-fast: var(--st-dur-fast) var(--st-ease);
  --cr-transition-med: var(--st-dur) var(--st-ease);
  --cr-transition-slow: var(--st-dur-slow) var(--st-ease);

  --cr-font-xs: var(--st-text-xs);
  --cr-font-sm: var(--st-text-sm);
  --cr-font-base: var(--st-text-base);
  --cr-font-md: var(--st-text-md);
  --cr-font-lg: var(--st-text-lg);
  --cr-font-xl: var(--st-display-md);
  --cr-font-2xl: var(--st-display-lg);
  /* Referenced by pages.css (.tl-preview-content) but never defined before. */
  --cr-font-mono: var(--st-font-mono);

  --cr-space-xs: var(--st-space-2);
  --cr-space-sm: var(--st-space-4);
  --cr-space-md: var(--st-space-5);
  --cr-space-lg: var(--st-space-6);
  --cr-space-xl: var(--st-space-8);
  --cr-space-2xl: var(--st-space-9);
  --cr-space-3xl: var(--st-space-10);

  /* Shared component roles. */
  --cr-shadow-soft: rgba(0,0,0,0.1);
  --cr-overlay-dialog: rgba(0,0,0,0.7);
  --cr-overlay-cover: rgba(0,0,0,0.8);
  --cr-dialog-bg: var(--st-surface-2);

  /* These were a light-theme palette stranded inside a dark app: a #dcfce7
     panel with #166534 text. Each pair is re-toned as dark wash + bright
     accent so the two halves still read together on an ink background. */
  --cr-success-bg-light: var(--st-verdigris-wash);
  --cr-success-text-dark: var(--st-positive);
  --cr-warning-bg-light: var(--st-ember-wash);
  --cr-warning-text-dark: var(--st-secondary);
  --cr-error-bg-pink: var(--st-error-wash);
  --cr-error-text-dark: var(--st-danger);
  --cr-error-bg-fee: var(--st-error-wash);
  --cr-error-text-c00: var(--st-danger);

  --cr-grad-cover: linear-gradient(135deg, var(--st-amethyst-deep) 0%, var(--st-primary) 100%);
  --cr-grad-success: linear-gradient(90deg, var(--st-positive), var(--st-positive));
  --cr-success-bg-diff: rgba(var(--cr-verdigris-rgb),0.15);
  --cr-error-bg-diff: rgba(var(--cr-error-rgb),0.15);

  --cr-bar-bg: var(--st-rule);
  --cr-draft-bg: var(--st-ember-wash);

  --cr-gray-light: var(--st-text);
  --cr-gray-muted: var(--st-text-muted);
  --cr-indigo-light: var(--st-amethyst-wash);
  --cr-tab-bg: var(--st-surface-1);
  --cr-error-bg-fef2: var(--st-error-wash);

  --cr-info-bg-light: var(--st-amethyst-wash);
  --cr-error-bg-fee2: var(--st-error-wash);
  --cr-primary-2-light: #b9a3f8;
  --cr-primary-2-lighter: #cfc0fb;

  --cr-text-white-80: var(--st-text);
  --cr-text-white-70: var(--st-text-muted);
  --cr-shadow-card: rgba(0,0,0,0.35);
  --cr-shadow-panel: rgba(0,0,0,0.45);

  /* Tooltip and enhanced UI */
  --cr-bg-tooltip: var(--st-surface-3);

  /* Channel triplets for the rgba() tints above. These are the only place a
     brief colour is repeated as raw channels; keep them in step with the
     --st-* hexes in studio.css (the token test asserts they match). */
  --cr-primary-rgb: 155, 126, 245;
  --cr-ember-rgb: 232, 147, 95;
  --cr-verdigris-rgb: 79, 174, 148;
  --cr-error-rgb: 226, 86, 90;

  /* Audit #1787260304428 fixes BUG-8231: scene-renderer.css is shared byte-for-byte with the
     reader and reads these theme tokens without a fallback. Same values as Main's root.css. */
  --theme-primary: var(--st-primary);
  --tint-vote-primary-80: rgba(var(--cr-primary-rgb), 0.08);
  --tint-vote-primary-180: rgba(var(--cr-primary-rgb), 0.18);
  --tint-vote-primary-350: rgba(var(--cr-primary-rgb), 0.35);
  --tint-vote-primary-500: rgba(var(--cr-primary-rgb), 0.5);
  --tint-vote-primary-700: rgba(var(--cr-primary-rgb), 0.7);
  --tint-jade-80: rgba(34, 197, 94, 0.08);
  --tint-jade-180: rgba(34, 197, 94, 0.18);
  --tint-jade-350: rgba(34, 197, 94, 0.35);
  --tint-jade-450: rgba(34, 197, 94, 0.45);
  --tint-jade-750: rgba(34, 197, 94, 0.75);
  --tint-accent-yellow-80: rgba(var(--cr-ember-rgb), 0.08);
  --tint-accent-yellow-180: rgba(var(--cr-ember-rgb), 0.18);
  --tint-accent-yellow-350: rgba(var(--cr-ember-rgb), 0.35);
  --tint-accent-yellow-450: rgba(var(--cr-ember-rgb), 0.45);
  --tint-accent-yellow-750: rgba(var(--cr-ember-rgb), 0.75);
}

/* IMP-0424: the staging/dev environment banner moved to css/env-banner.css, which is
   linked only on a stack that renders it. Keeping it here meant every production page
   downloaded rules for an element it never has, and there was nowhere to put the chrome
   offsets that stop it covering the sidebar (BUG-1036) without shipping them live too. */

/* IMP-0379: honor the OS-level vestibular-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* IMP-0328: shared form-validation runtime semantics. */
.form-field-invalid {
  border-color: var(--st-danger) !important;
  outline: 2px solid var(--cr-error-border);
  outline-offset: 1px;
}

.form-field-error {
  color: var(--cr-error-text);
  display: block;
  font-size: 0.82rem;
  line-height: var(--st-leading-ui);
  margin-top: 0.35rem;
}

.form-error-summary {
  background: var(--cr-error-bg);
  border: 1px solid var(--cr-error-border);
  border-radius: var(--st-radius-xs);
  color: var(--cr-text);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}