/* ==========================================================================
   TranscodeX — Design tokens
   Cute-alism: warm, rounded, playful shell around precise video tooling.
   Edit values here, not in component files.
   ========================================================================== */

:root {
  /* Surfaces ------------------------------------------------------------ */
  --tx-bg: #fffcf6;
  --tx-bg-tint: #fff4e7;
  --tx-surface: #ffffff;
  --tx-surface-2: #fff6ec;
  --tx-surface-lilac: #f2ecff;
  --tx-surface-blue: #e9f3ff;
  --tx-surface-mint: #e6faf0;
  --tx-surface-butter: #fff6d6;
  --tx-surface-peach: #ffeee4;

  /* Ink ----------------------------------------------------------------- */
  --tx-ink: #2b2540;
  --tx-ink-2: #5a5470;
  --tx-ink-3: #6b657f;

  /* Lines --------------------------------------------------------------- */
  --tx-line: #ede4d7;
  --tx-line-strong: #ddd0bd;
  --tx-line-ink: rgba(43, 37, 64, 0.12);

  /* Brand -------------------------------------------------------------- */
  --tx-primary: #6d4aff;
  --tx-primary-2: #9b7bff;
  --tx-primary-deep: #5333d6;
  --tx-secondary: #5b9df9;
  --tx-accent: #3fc994;
  --tx-highlight: #ffcf4d;
  --tx-warm: #ff9e7a;
  --tx-pink: #ff9dc3;

  /* Semantic ----------------------------------------------------------- */
  --tx-success: #2fa876;
  --tx-success-ink: #1f7a55;
  --tx-warn: #d98a1f;
  --tx-error: #dd5b79;

  /* Typography --------------------------------------------------------- */
  --tx-font-display: 'Baloo 2', 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --tx-font: 'Nunito', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tx-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --tx-fs-display: clamp(3rem, 8.5vw, 6.5rem);
  --tx-fs-h1: clamp(2.1rem, 4.6vw, 3.4rem);
  --tx-fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --tx-fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --tx-fs-body: 1.0625rem;
  --tx-fs-sm: 0.9375rem;
  --tx-fs-xs: 0.8125rem;

  /* Radii -------------------------------------------------------------- */
  --tx-radius-sm: 12px;
  --tx-radius-md: 18px;
  --tx-radius-lg: 26px;
  --tx-radius-xl: 36px;
  --tx-radius-pill: 999px;

  /* Spacing ------------------------------------------------------------ */
  --tx-space-1: 4px;
  --tx-space-2: 8px;
  --tx-space-3: 12px;
  --tx-space-4: 16px;
  --tx-space-5: 24px;
  --tx-space-6: 32px;
  --tx-space-7: 48px;
  --tx-space-8: 72px;
  --tx-max: 1200px;

  /* Shadows ------------------------------------------------------------ */
  --tx-shadow-soft: 0 2px 4px rgba(43, 37, 64, 0.04), 0 14px 34px -16px rgba(43, 37, 64, 0.18);
  --tx-shadow-lift: 0 8px 18px -10px rgba(43, 37, 64, 0.22), 0 34px 60px -34px rgba(109, 74, 255, 0.4);
  --tx-shadow-pop: 0 5px 0 rgba(83, 51, 214, 0.28);
  --tx-shadow-pop-mint: 0 5px 0 rgba(47, 168, 118, 0.28);
  --tx-ring: 0 0 0 4px rgba(109, 74, 255, 0.18);

  /* Gradients ---------------------------------------------------------- */
  --tx-grad-brand: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-deep) 100%);
  --tx-grad-mint: linear-gradient(135deg, #4fd6a3 0%, #2fa876 100%);
  --tx-grad-sun: linear-gradient(135deg, #ffd873 0%, #ffb14d 100%);

  /* Motion ------------------------------------------------------------- */
  --tx-t-fast: 130ms;
  --tx-t: 220ms;
  --tx-t-slow: 460ms;
  --tx-ease: cubic-bezier(0.22, 0.7, 0.3, 1.2);
  --tx-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}