/* Design tokens. The colours are SceneMill's own: the application's theme
   (src/app/Theme.h) and the brand colours of its mark (src/app/Brand.h). */
:root {
  /* Surfaces, from the application */
  --ink: #0d0e13;            /* brand ink: the page */
  --window: #0f1013;
  --panel: #1b1d21;
  --panel-raised: #26292e;
  --field: #141619;
  --track: #1c1e22;
  --border: #2e3238;
  --border-strong: #454a53;

  /* Text */
  --text: #f4f0ea;           /* the wordmark's off-white */
  --text-soft: #c3c6cc;
  --text-muted: #8d939c;

  /* The application's accent: playhead, selection, primary button */
  --accent: #e3a23b;
  --accent-hover: #eeb04d;
  --accent-pressed: #c98a2c;
  --accent-text: #1a1408;
  --accent-wash: #2c2618;

  /* The mark's gradient, hub to sail tip. Only the progress bar in the header uses it. */
  --brand-amber: #ffc84a;
  --brand-coral: #ff6b4a;
  --brand-magenta: #e83f7e;
  --brand-gradient: linear-gradient(90deg, var(--brand-amber), var(--brand-coral) 55%, var(--brand-magenta));

  /* Timeline clips, as the application paints them */
  --clip-video: #3d5f80;
  --clip-video-edge: #5a80a6;
  --clip-audio: #356e5e;
  --clip-audio-edge: #4f9580;
  --clip-effect: #6a5586;
  --clip-effect-edge: #8d76ab;
  --clip-text: #7a623a;
  --clip-text-edge: #b08f52;

  /* Type. The wordmark is set in Bahnschrift (a DIN), which every Windows
     computer has, and SceneMill is a Windows program; other systems fall
     back to their own DIN or system face. No web fonts are downloaded. */
  --font-display: Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-hero: clamp(3.25rem, 1.2rem + 7.4vw, 8.25rem);
  --text-h2: clamp(2.1rem, 1.3rem + 2.9vw, 4rem);
  --text-h3: clamp(1.45rem, 1.2rem + 0.9vw, 2rem);
  --text-lede: clamp(1.08rem, 1rem + 0.42vw, 1.32rem);
  --text-base: 1.0625rem;
  --text-small: 0.9rem;
  --text-micro: 0.78rem;

  /* Space */
  --page-width: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --space-section: clamp(5.5rem, 3.5rem + 8vw, 11rem);
  --space-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  /* Shape and depth */
  --radius-small: 4px;
  --radius: 8px;
  --radius-window: 10px;
  --shadow-window: 0 40px 80px -24px rgb(0 0 0 / 0.75), 0 12px 28px -12px rgb(0 0 0 / 0.6);

  /* Motion */
  --duration-fast: 150ms;
  --duration: 320ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-height: 64px;
}