/* Creator tool design tokens. Every colour comes from the brand roles in
   Assets/brand-tokens.css: ground/ground-alt/front/accent/positive switch with the colour
   scheme there, greys are front-over-ground composites (85/62/55%), tints and borders are
   front or accent at low opacity. No other hue is used. Components use only these tokens. */
:root {
  color-scheme: light dark;
  /* Surfaces */
  --color-page: var(--fp-ground);
  --color-surface: var(--fp-ground);
  --color-surface-2: var(--fp-ground-alt);
  --color-floating: color-mix(in srgb, var(--fp-ground) 94%, transparent);
  /* Text: front and its 85/62/55% composites over ground (#3F3C38, #716E6A, #807D7A in light) */
  --color-text: var(--fp-front);
  --color-text-2: color-mix(in srgb, var(--fp-front) 85%, var(--fp-ground));
  --color-text-muted: color-mix(in srgb, var(--fp-front) 62%, var(--fp-ground));
  --color-text-faint: color-mix(in srgb, var(--fp-front) 55%, var(--fp-ground));
  /* Lines and tints */
  --color-border: color-mix(in srgb, var(--fp-front) 12%, transparent);
  --color-border-strong: color-mix(in srgb, var(--fp-front) 16%, transparent);
  --color-border-dashed: color-mix(in srgb, var(--fp-front) 25%, transparent);
  --color-hover: color-mix(in srgb, var(--fp-front) 6%, transparent);
  --color-divider: color-mix(in srgb, var(--fp-front) 6%, transparent);
  /* Accent (copper): fill vs text/icon, per the brand accent / accent-ink split */
  --color-accent: var(--fp-accent);
  --color-accent-text: var(--fp-accent-ink);
  --color-on-accent: var(--fp-on-accent);
  --color-accent-tint: color-mix(in srgb, var(--fp-accent) 10%, transparent);
  --color-accent-badge: color-mix(in srgb, var(--fp-accent) 12%, transparent);
  --color-accent-range: color-mix(in srgb, var(--fp-accent) 45%, transparent);
  --color-accent-ring: color-mix(in srgb, var(--fp-accent) 45%, transparent);
  /* Attention / warning / error share the copper family and always carry an icon or text */
  --color-attention: var(--fp-accent-ink);
  --color-attention-tint: color-mix(in srgb, var(--fp-accent) 8%, transparent);
  /* Positive state (teal) */
  --color-positive: var(--fp-positive);
  --color-positive-tint: color-mix(in srgb, var(--fp-positive) 10%, transparent);
  --color-positive-border: color-mix(in srgb, var(--fp-positive) 45%, transparent);
  /* Kind markers */
  --color-marker-text: color-mix(in srgb, var(--fp-front) 35%, transparent);
  --color-marker-ring: var(--color-text-muted);
  /* Inverse surfaces (selected graph card, phone route bar, toast, tooltips). Light mode puts
     paper-dark text and copper-ink-dark on ink; dark mode flips to an ink-on-paper-dark chip. */
  --color-inverse-surface: var(--fp-color-ink);
  --color-inverse-text: var(--fp-color-paper-dark);
  --color-inverse-muted: color-mix(in srgb, var(--fp-color-paper-dark) 75%, var(--fp-color-ink));
  --color-inverse-accent: var(--fp-color-copper-ink-dark);
  /* Selected chip / segmented thumb */
  --color-selected: var(--fp-front);
  --color-on-selected: var(--fp-ground);
  /* Graph canvas */
  --color-canvas: var(--fp-ground-alt);
  --color-canvas-dot: color-mix(in srgb, var(--fp-front) 10%, transparent);
  --color-edge: color-mix(in srgb, var(--fp-front) 30%, transparent);
  --color-edge-choice: color-mix(in srgb, var(--fp-accent) 55%, transparent);
  /* Elevation */
  --color-shadow: color-mix(in srgb, var(--fp-color-ink) 12%, transparent);
  --color-shadow-strong: color-mix(in srgb, var(--fp-color-ink) 18%, transparent);
  --color-backdrop: color-mix(in srgb, var(--fp-color-ink) 28%, transparent);
  --shadow-thumb: 0 1px 2px var(--color-shadow);
  --shadow-floating: 0 1px 3px var(--color-shadow);
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--fp-color-ink) 8%, transparent);
  --shadow-dock: 0 2px 8px var(--color-shadow-strong);
  --shadow-menu: 0 8px 28px var(--color-shadow-strong);
  --shadow-dialog: 0 12px 50px var(--color-shadow-strong);
  /* Typography: local brand stacks only, no web fonts */
  --font-ui: var(--fp-font-sans);
  --font-serif: var(--fp-font-serif);
  --font-mono: var(--fp-font-mono);
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 17px;
  --font-size-2xl: 18px;
  --font-size-3xl: 22px;
  /* Spacing scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  /* Corner radius: 10–12px for controls and cards */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* Sizes */
  --topbar-height: 56px;
  --control-height: 40px;
  --touch-target: 44px;
  --bottom-nav-height: 64px;
  /* Stacking layers, lowest to highest */
  --z-canvas-ui: 3;
  --z-resizer: 4;
  --z-dock: 6;
  --z-topbar: 20;
  --z-drawer: 25;
  --z-menu: 30;
  --z-tooltip: 35;
  --z-toast: 40;
  --z-skip-link: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-floating: color-mix(in srgb, var(--fp-ground) 92%, transparent);
    --color-inverse-surface: var(--fp-color-paper-dark);
    --color-inverse-text: var(--fp-color-ink);
    --color-inverse-muted: color-mix(in srgb, var(--fp-color-ink) 75%, var(--fp-color-paper-dark));
    /* Copper text on paper-dark misses 4.5:1, so emphasis on the light chip uses ink. */
    --color-inverse-accent: var(--fp-color-ink);
    --color-shadow: color-mix(in srgb, var(--fp-color-night) 60%, transparent);
    --color-shadow-strong: color-mix(in srgb, var(--fp-color-night) 75%, transparent);
    --color-backdrop: color-mix(in srgb, var(--fp-color-night) 60%, transparent);
  }
}