/* ==========================================================================
   tokens.css - Design tokens: colors, radii, surfaces
   Dooze Clip Generator
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Gemini Dark Canvas & Surfaces (Extracted from gemini.google.com) */
  --bg: #131314;
  --bg-ambient: radial-gradient(circle at 58% 28%, rgba(28, 48, 88, 0.24) 0%, rgba(19, 19, 20, 0) 65%), #131314;
  --surface: #1e1f20;
  --surface-raised: #282a2c;
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-soft: rgba(255, 255, 255, 0.045);
  --surface-soft-hover: rgba(255, 255, 255, 0.085);
  --surface-inset: rgba(0, 0, 0, 0.32);

  /* Typography & Hierarchy */
  --font-family: "Google Sans", "Google Sans Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-primary: #e3e3e3;
  --text-secondary: #c4c7c5;
  --text-tertiary: #8e918f;

  /* Borders & Accents */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-focus: rgba(168, 199, 250, 0.45);
  --accent: #a8c7fa;
  --accent-hover: #bacfff;
  --accent-text: #041e49;
  --accent-surface: rgba(168, 199, 250, 0.14);
  --accent-border: rgba(168, 199, 250, 0.28);
  --gemini-gradient: linear-gradient(135deg, #4285F4 0%, #9B72CB 50%, #D96570 100%);
  --gemini-aurora: linear-gradient(135deg, #4285F4 0%, #9B72CB 40%, #D96570 75%, #1A73E8 100%);
  --gemini-aurora-sweep: linear-gradient(90deg, #4285F4 0%, #9B72CB 25%, #D96570 50%, #9B72CB 75%, #4285F4 100%);
  --error: #f28b82;
  --warning: #f2c66d;
  --success: #81c995;

  /* Icon Sizing Tokens (Gemini Standard) */
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-stroke: 1.8px;

  /* Gemini Animation Easings & Durations */
  --ease-gemini: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.27, 1.06, 0.18, 1);
  --duration-micro: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 350ms;

  /* Geometry & Elevation */
  --radius-panel: 28px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-panel: 0 16px 48px -12px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}