/*
  AnimDeck design tokens: the ONE file the brand changes.
  Everything here is a neutral PLACEHOLDER until the owner's palette and fonts are final.
  Pages and components use these names only, never raw colours or font names.
*/

:root {
  /* Surfaces: light (owner 2026-11-09: no black background). One look for everyone, not tied to system dark mode. */
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #ebebe8;
  --line: #dcdcd8;

  /* Text */
  --text: #1b1c1e;
  --text-muted: #5c5e63;
  --text-on-accent: #ffffff;

  /* Wordmark: the "Deck" half. Logo spec colour #4FE3C1 is for dark backgrounds; on light it uses the deeper teal. */
  --brand-deck: #1F8C8A;

  /* Accent: placeholder dark grey. The brand colour replaces these four values. */
  --accent: #26282c;
  --accent-hover: #000000;
  --ghost-1: rgb(38 40 44 / 0.3); /* onion-skin echo, nearest frame */
  --ghost-2: rgb(38 40 44 / 0.12); /* onion-skin echo, furthest frame */

  /* Tier colours: PLACEHOLDERS so the colour coding can be judged. The owner picks the final set. */
  --tier-indie: #2f7cb4;
  --tier-pro: #8a4fae;
  --tier-studio: #d0661c;
  --tier-perpetual: #55585e;
  /* Text shades of the tier colours: same hue, dark enough for 4.5:1 on --bg and on the tile tint */
  --tier-indie-ink: #1f5f8e;
  --tier-pro-ink: #6e3a8f;
  --tier-studio-ink: #9c4710;
  --tier-perpetual-ink: #4a4d52;

  /* Semantic */
  --error: #b42318; /* 6.1:1 on --bg, readable as text */

  /* Checker shown where a video will go */
  --slot-a: #e2e2de;
  --slot-b: #ececea;

  /* Type: system fonts as placeholders */
  --font-display: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type scale (fluid, ~1.25 ratio) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.56rem, 1.42rem + 0.6vw, 1.85rem);
  --step-3: clamp(1.95rem, 1.7rem + 1.1vw, 2.5rem);
  --step-4: clamp(2.44rem, 2rem + 1.9vw, 3.4rem);
  --step-5: clamp(3rem, 2.3rem + 3vw, 4.4rem);

  /* Shape: one radius for the whole site */
  --radius: 10px;
  --radius-pill: 999px; /* buttons and toggles only */

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --page-max: 1240px;
  --text-max: 62ch;

  /* Motion (research/motion_spec.md) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);
  --ease-in: cubic-bezier(.32, 0, .67, 0);
  --dur-micro: 120ms;
  --dur-hover: 150ms;
  --dur-base: 240ms;
  --dur-exit: 180ms;
  --dur-page: 360ms;

  color-scheme: light;
}