/* CR-C9D0E1F2
   CLIPRENDER DESIGN SYSTEM -- tokens.css
   Single source of truth for all design tokens as CSS custom properties.
   Values from instructions/DESIGN_SYSTEM.md (Radix-inspired rewrite)
*/

:root {
  /* ═══ Gray Scale (Radix 12-step) ═══ */
  --gray-1: #000000;
  --gray-2: #0a0a0a;
  --gray-3: #141414;
  --gray-4: #1c1c1c;
  --gray-5: #242424;
  --gray-6: #2d2d2d;
  --gray-7: #3a3a3a;
  --gray-8: #4a4a4a;
  --gray-9: #63666c;
  --gray-10: #6e747d;
  --gray-11: #8b919a;
  --gray-12: #ffffff;

  /* ═══ Gray Alpha Scale ═══ */
  --gray-a1: rgba(255, 255, 255, 0.01);
  --gray-a2: rgba(255, 255, 255, 0.03);
  --gray-a3: rgba(255, 255, 255, 0.04);
  --gray-a4: rgba(255, 255, 255, 0.06);
  --gray-a5: rgba(255, 255, 255, 0.08);
  --gray-a6: rgba(255, 255, 255, 0.16);
  --gray-a7: rgba(255, 255, 255, 0.22);
  --gray-a8: rgba(255, 255, 255, 0.28);
  --gray-a9: rgba(255, 255, 255, 0.40);
  --gray-a10: rgba(255, 255, 255, 0.56);
  --gray-a11: rgba(255, 255, 255, 0.72);
  --gray-a12: rgba(255, 255, 255, 0.96);

  /* ═══ Accent Scale (monochrome white) ═══ */
  --accent-1: #0a0a0a;
  --accent-2: #141414;
  --accent-3: #1d1d1d;
  --accent-4: #272727;
  --accent-5: #323232;
  --accent-6: #404040;
  --accent-7: #525252;
  --accent-8: #707070;
  --accent-9: #ffffff;
  --accent-10: #e8e8e8;
  --accent-11: #f5f5f5;
  --accent-12: #ffffff;
  --accent-contrast: #000000;
  --accent-surface: rgba(255, 255, 255, 0.04);

  /* ═══ Accent Alpha Scale ═══ */
  --accent-a1: rgba(255, 255, 255, 0.01);
  --accent-a2: rgba(255, 255, 255, 0.04);
  --accent-a3: rgba(255, 255, 255, 0.08);
  --accent-a4: rgba(255, 255, 255, 0.12);
  --accent-a5: rgba(255, 255, 255, 0.16);
  --accent-a6: rgba(255, 255, 255, 0.22);
  --accent-a7: rgba(255, 255, 255, 0.28);
  --accent-a8: rgba(255, 255, 255, 0.36);
  --accent-a9: rgba(255, 255, 255, 0.64);
  --accent-a10: rgba(255, 255, 255, 0.56);
  --accent-a11: rgba(255, 255, 255, 0.80);
  --accent-a12: rgba(255, 255, 255, 0.96);

  /* ═══ Alias Tokens ═══ */
  --color-background: var(--gray-1);
  --surface-1: var(--gray-2);
  --surface-2: var(--gray-3);
  --surface-hover: var(--gray-a3);
  --surface-active: var(--gray-a4);
  --border-subtle: var(--gray-a6);
  --border-interactive: var(--gray-a7);
  --border-strong: var(--gray-a8);
  --text-muted: var(--gray-10);
  --text-secondary: var(--gray-11);
  --text-primary: var(--gray-12);
  --text-on-accent: var(--accent-contrast);

  /* ═══ Legacy Aliases (resolve to new scale) ═══ */
  --bg-base: var(--gray-1);
  --bg-raised: var(--gray-2);
  --bg-overlay: var(--gray-3);
  --bg-hover: var(--gray-a3);
  --bg-active: var(--gray-a4);
  --bg-input: var(--gray-a2);
  --bg-primary: var(--gray-1);
  --bg-secondary: var(--gray-2);
  --overlay-scrim: rgba(0, 0, 0, 0.70);
  --overlay-mask: rgba(0, 0, 0, 0.60);
  --waveform-muted: rgba(255, 255, 255, 0.20);

  /* Legacy text aliases */
  --text-tertiary: var(--gray-10);

  /* Legacy border aliases */
  --border-default: var(--gray-a6);
  --border-hover: var(--gray-a8);
  --border-input: var(--gray-a6);

  /* Legacy accent aliases */
  --accent-primary: var(--accent-9);
  --accent-primary-hover: var(--accent-10);
  --accent-muted: var(--accent-a3);

  /* ═══ Semantic Scales (Radix 12-step) ═══ */

  /* Success (Green) */
  --green-3: rgba(45, 164, 78, 0.10);
  --green-4: rgba(45, 164, 78, 0.15);
  --green-5: rgba(45, 164, 78, 0.20);
  --green-6: rgba(45, 164, 78, 0.28);
  --green-7: rgba(45, 164, 78, 0.36);
  --green-8: rgba(45, 164, 78, 0.48);
  --green-9: #2da44e;
  --green-10: #26913f;
  --green-11: #7ee2a8;
  --green-12: #b1f1cb;
  --green-contrast: #ffffff;
  --success: var(--green-9);
  --success-muted: var(--green-4);

  /* Warning (Yellow) */
  --yellow-3: rgba(212, 167, 44, 0.10);
  --yellow-4: rgba(212, 167, 44, 0.15);
  --yellow-5: rgba(212, 167, 44, 0.20);
  --yellow-6: rgba(212, 167, 44, 0.28);
  --yellow-7: rgba(212, 167, 44, 0.36);
  --yellow-8: rgba(212, 167, 44, 0.48);
  --yellow-9: #d4a72c;
  --yellow-10: #c29a24;
  --yellow-11: #f0d375;
  --yellow-12: #f5e5a3;
  --yellow-contrast: #000000;
  --warning: var(--yellow-9);
  --warning-muted: var(--yellow-4);

  /* Error (Red) */
  --red-3: rgba(229, 72, 77, 0.10);
  --red-4: rgba(229, 72, 77, 0.15);
  --red-5: rgba(229, 72, 77, 0.20);
  --red-6: rgba(229, 72, 77, 0.28);
  --red-7: rgba(229, 72, 77, 0.36);
  --red-8: rgba(229, 72, 77, 0.48);
  --red-9: #e5484d;
  --red-10: #d93d42;
  --red-11: #ff9da0;
  --red-12: #ffc6c8;
  --red-contrast: #ffffff;
  --error: var(--red-9);
  --error-muted: var(--red-4);

  /* Info (Blue) */
  --blue-3: rgba(59, 130, 246, 0.10);
  --blue-4: rgba(59, 130, 246, 0.15);
  --blue-5: rgba(59, 130, 246, 0.20);
  --blue-6: rgba(59, 130, 246, 0.28);
  --blue-7: rgba(59, 130, 246, 0.36);
  --blue-8: rgba(59, 130, 246, 0.48);
  --blue-9: #3b82f6;
  --blue-10: #3072e0;
  --blue-11: #8ab6ff;
  --blue-12: #c2d9ff;
  --blue-contrast: #ffffff;
  --info: var(--blue-9);
  --info-muted: var(--blue-4);

  /* ═══ Border Radius (Radix medium theme) ═══ */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  --radius-factor: 1;
  --radius-full: 9999px;
  --radius-thumb: 9999px;

  /* Legacy radius aliases */
  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-3);
  --radius-lg: var(--radius-4);
  --radius-xl: var(--radius-5);
  --radius-btn: var(--radius-4);
  --radius-auth-control: var(--radius-4);
  --radius-auth: var(--radius-4);

  /* ═══ Auth / Link Tokens ═══ */
  --accent-link: var(--blue-9);
  --size-touch-target: 44px;

  /* ═══ Shadows (Radix restrained scale) ═══ */
  --shadow-1: inset 0 0 0 1px var(--gray-a5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--gray-a5);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--gray-a5);
  --shadow-4: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--gray-a5);
  --shadow-5: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--gray-a5);
  --shadow-6: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gray-a5);

  /* Legacy shadow aliases */
  --shadow-sm: var(--shadow-2);
  --shadow-md: var(--shadow-3);
  --shadow-lg: var(--shadow-5);
  --shadow-glow: none;

  /* ═══ Glass -- disabled (elevation via shadow only) ═══ */
  --glass-bg: var(--gray-2);
  --glass-bg-heavy: var(--gray-2);
  --glass-blur: blur(0px);
  --glass-blur-heavy: blur(0px);
  --glass-border: var(--gray-a6);

  /* ═══ HSL Accent Palette ═══ */
  --color-1: 0 100% 63%;
  --color-2: 270 100% 63%;
  --color-3: 210 100% 63%;
  --color-4: 195 100% 63%;
  --color-5: 90 100% 63%;
  --preview-transition: #8b5cf6;
  --preview-caption: #f59e0b;

  /* ═══ Font Families (Radix rewrite) ═══ */
  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', monospace;

  /* ═══ Spacing Scale (Radix 9-step) ═══ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* Legacy spacing aliases */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ═══ Easing ═══ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══ Duration Tokens ═══ */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-layout: 300ms;
  --duration-complex: 500ms;
  --tooltip-delay: 700ms;
  --tooltip-skip-delay: 300ms;

  /* Legacy duration aliases */
  --duration-interaction: var(--duration-slow);
  --duration-page: var(--duration-layout);
}