/* GENERATED — do not edit.
 * Source: stitch-design-system/tokens/{colors,typography,spacing,radius,elevation,motion,motifs}.css
 * Regenerate: node scripts/build-marketing-tokens.mjs
 * The .light and .st-dark-island layer-2 overrides are stripped: the marketing
 * site is ink-only and has no light surface to flip to.
 */

/* --- colors.css ------------------------------------------------------- */
/* Stitch colour system.
   Layer 1 - raw ramps, global, never re-themed. HSL triplets (no hsl()
   wrapper) so any of them can be used at partial alpha: hsl(var(--st-thread-500) / 0.14).
   Layer 2 - semantic aliases, flipped by .light and .st-dark-island. */
:root {
  /* Warm ink - the canvas. Every neutral in Stitch is warm, never blue-grey. */
  --st-ink-950: 40 12% 5%; /* @kind color */ /* #0E0D0B page canvas */
  --st-ink-900: 36 12% 8%; /* @kind color */ /* #171512 panel / popover / header */
  --st-ink-850: 34 12% 12%; /* @kind color */ /* #22201C card */
  --st-ink-800: 36 13% 15%; /* @kind color */ /* #2B2720 raised / hover / secondary */
  --st-ink-700: 36 12% 22%; /* @kind color */ /* #3F392F borders */
  --st-ink-600: 36 10% 30%; /* @kind color */ /* #544E44 */
  --st-ink-400: 38 10% 55%; /* @kind color */ /* #948C7D muted text floor (AA on ink-950) */
  --st-ink-200: 40 15% 80%; /* @kind color */ /* #D5CDC1 */
  --st-paper:   40 27% 94%; /* @kind color */ /* #F5F2EC body text on ink; canvas in light theme */

  /* Thread - the lime primary. Named for the thread in a stitch. */
  --st-thread-300: 71 92% 74%; /* @kind color */
  --st-thread-500: 71 90% 60%; /* @kind color */ /* #D4F53C */
  --st-thread-600: 71 75% 48%; /* @kind color */
  --st-thread-700: 72 70% 36%; /* @kind color */

  /* Spool - the cyan secondary. Info, links, "preview ready". */
  --st-spool-500: 172 51% 66%; /* @kind color */ /* #7BD4C8 */
  --st-spool-700: 172 45% 40%; /* @kind color */

  --st-success: 142 64% 58%; /* @kind color */
  --st-warning: 40 90% 60%; /* @kind color */
  --st-danger:  6 85% 66%; /* @kind color */

  /* Layer 2 - semantic aliases. Components only ever reference these. */
  --background: var(--st-ink-950); /* @kind color */
  --foreground: var(--st-paper); /* @kind color */
  --card: var(--st-ink-850); /* @kind color */
  --card-foreground: var(--st-paper); /* @kind color */
  --popover: var(--st-ink-900); /* @kind color */
  --popover-foreground: var(--st-paper); /* @kind color */
  --primary: var(--st-thread-500); /* @kind color */
  --primary-foreground: var(--st-ink-950); /* @kind color */
  --secondary: var(--st-ink-800); /* @kind color */
  --secondary-foreground: var(--st-paper); /* @kind color */
  --muted: var(--st-ink-800); /* @kind color */
  --muted-foreground: var(--st-ink-400); /* @kind color */
  --accent: var(--st-spool-500); /* @kind color */
  --accent-foreground: var(--st-ink-950); /* @kind color */
  --info: var(--st-spool-500); /* @kind color */
  --info-foreground: var(--st-ink-950); /* @kind color */
  --success: var(--st-success); /* @kind color */
  --warning: var(--st-warning); /* @kind color */
  --destructive: var(--st-danger); /* @kind color */
  --destructive-foreground: var(--st-ink-950); /* @kind color */
  --border: var(--st-ink-700); /* @kind color */
  --input: var(--st-ink-700); /* @kind color */
  --ring: var(--st-thread-500); /* @kind color */
}

/* --- typography.css ------------------------------------------------------- */
/* Three families, each with one job.
   Switzer - display. Product name, h1-h3, page titles. Semibold, tight tracking.
     Same family the logotype is drawn in (Switzer 500), so the wordmark and the
     headings beside it are one voice. Until 2026-09-02 this was Space Grotesk.
   Inter - everything else. UI text, body copy, labels, buttons.
   JetBrains Mono - every timecode, duration and count. Tabular figures. */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Switzer", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale. 2xs is the one rung below Tailwind's text-xs, added for the
     timeline's dense micro-labels (segment tags, lane eyebrows). */
  --text-2xs: 0.6875rem; /* @kind font */   /* 11px */  --leading-2xs: 1rem;
  --text-xs: 0.75rem; /* @kind font */      /* 12px */  --leading-xs: 1rem;
  --text-sm: 0.875rem; /* @kind font */     /* 14px */  --leading-sm: 1.25rem;
  --text-base: 1rem; /* @kind font */       /* 16px */  --leading-base: 1.5rem;
  --text-lg: 1.125rem; /* @kind font */     /* 18px */  --leading-lg: 1.75rem;
  --text-xl: 1.25rem; /* @kind font */      /* 20px */  --leading-xl: 1.75rem;
  --text-2xl: 1.5rem; /* @kind font */      /* 24px */  --leading-2xl: 2rem;
  --text-3xl: 1.875rem; /* @kind font */    /* 30px */  --leading-3xl: 2.25rem;

  --weight-regular: 400; /* @kind other */
  --weight-medium: 500; /* @kind other */
  --weight-semibold: 600; /* @kind other */
  --weight-bold: 700; /* @kind other */

  --tracking-tight: -0.025em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide: 0.025em; /* @kind other */

  /* Inter's stylistic sets, on app-wide: cv11 (single-storey a in some cuts),
     ss01. Set on body in the product. */
  --font-feature-ui: "cv11", "ss01";
}

/* --- spacing.css ------------------------------------------------------- */
/* 4px grid, unmodified Tailwind default. Nothing in Stitch uses an off-grid
   px value: if a spec says 5px, it is a bug, not a token. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-1_5: 0.375rem; /* 6 */
  --space-2: 0.5rem;   /* 8 */
  --space-2_5: 0.625rem; /* 10 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-16: 4rem;    /* 64 */

  /* Control heights. 40px is the floor for anything tappable. */
  --control-sm: 2.25rem;   /* 36 */
  --control-md: 2.5rem;    /* 40 - default input/button/select */
  --control-lg: 2.75rem;   /* 44 - touch floor, nav items */
  --touch-min: 2.75rem;    /* 44 */

  /* Layout */
  --page-max: 64rem;       /* 1024 - reading-width cap on forms/grids */
  --page-max-editor: 100rem; /* 1600 - the cuts route escapes the cap at xl+ */
  --header-height: 3.5rem; /* 56 */

  /* Timeline geometry (px, not rem - these are pixel instruments) */
  --tl-ruler-height: 24px;
  --tl-segment-lane: 70px;
  --tl-caption-lane: 40px;
  --tl-event-lane: 40px;
  --tl-broll-lane: 35px;
  --tl-music-lane: 40px;
  --tl-label-strip: 14px;
  --tl-px-per-second: 36; /* @kind other */
}

/* --- radius.css ------------------------------------------------------- */
/* One base radius, two derived rungs, plus the pill. Cards and dialogs get
   the full 12px; buttons, inputs and selects sit at 10px; small chips at 8px. */
:root {
  --radius: 0.75rem;                      /* 12px - card, dialog, sheet edge */
  --radius-md: calc(var(--radius) - 2px); /* 10px - button, input, select */
  --radius-sm: calc(var(--radius) - 4px); /* 8px  - small chips, thumbs */
  --radius-xs: 0.25rem;                   /* 4px  - checkbox box */
  --radius-full: 9999px;                  /* pill, tag, slider track, progress */
}

/* --- elevation.css ------------------------------------------------------- */
/* Shadows are quiet. Stitch is a dark app: depth comes from surface value
   (ink-950 -> 900 -> 850 -> 800) and a 1px warm border, not from drop shadows.
   Only two rungs are in use - sm on resting cards, lg on floating surfaces. */
:root {
  --shadow-sm: 0 1px 2px 0 hsl(var(--st-ink-950) / 0.3);
  --shadow-lg: 0 10px 15px -3px hsl(var(--st-ink-950) / 0.4), 0 4px 6px -4px hsl(var(--st-ink-950) / 0.4);

  /* Scrims and overlays */
  --overlay-dialog: hsl(var(--st-ink-950) / 0.7); /* @kind other */
  --overlay-sheet: hsl(var(--st-ink-950) / 0.5); /* @kind other */
  --overlay-blur: blur(4px); /* @kind other */
  --scrim-player: linear-gradient(to top, hsl(var(--st-ink-950) / 0.85), transparent); /* @kind other */
  --glow-thread: radial-gradient(circle at 50% -10%, hsl(var(--st-thread-500) / 0.14), transparent 60%); /* @kind other */

  /* Focus */
  --focus-ring: 0 0 0 2px hsl(var(--ring)); /* @kind other */
  --focus-offset: 2px; /* @kind other */
}

/* --- motion.css ------------------------------------------------------- */
/* Motion is short and unfussy. No bounce, no spring, no attention-seeking
   entrances. Colour transitions at 150ms, layout/transform at 200ms, the
   progress bar's width at 500ms because it represents real elapsed work. */
:root {
  --duration-fast: 100ms; /* @kind other */
  --duration-base: 150ms; /* @kind other */
  --duration-slow: 200ms; /* @kind other */
  --duration-progress: 500ms; /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --transition-colors: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); /* @kind other */
}

/* The caption entry pop - engine parity, mirrors the render pipeline's own
   caption treatment (alpha in over 0.07s, scale 0.94 -> 1 over 0.11s).
   This is video content, not app chrome; never reuse it on UI. */
@keyframes st-cap-pop {
  from { opacity: 0; transform: scale(0.94); }
  63% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes st-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* The running tick in the ledger (LedgerRow state="running"). */
@keyframes st-spin { to { transform: rotate(360deg); } }

/* --- motifs.css ------------------------------------------------------- */
/* The seam. Stitch's one signature graphic: a dashed Thread line that reads
   as machine stitching. It sits under the wordmark, under the active nav item,
   between stepper steps, above dialog footers, and under the selected clip
   card. Never decorative filler - it always marks a seam between two things. */
.stitch-line {
  background-image: repeating-linear-gradient(90deg, hsl(var(--st-thread-500)) 0 4px, transparent 4px 7px);
  height: 2px;
}

/* An active dropzone border - the same dashes, as an outline. */
.stitch-border-active { border: 1.5px dashed hsl(var(--st-thread-500)); }

/* Tick texture. Faint vertical rules every 24px, like a timecode ruler bleeding
   through the surface. Used behind empty states, the auth canvas, and unloaded
   poster frames. Ambient only; never over text-heavy content. */
.tick-texture {
  background-image: repeating-linear-gradient(90deg, hsl(var(--st-ink-700) / 0.35) 0 1px, transparent 1px 24px);
}

/* Every timecode, duration and count in the product. Tabular figures so digits
   do not jitter as they count. */
.st-timecode {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Bottom scrim behind the player's control bar. */
.player-scrim { background-image: var(--scrim-player); }