/* Design Token CSS Variables
 * Auto-generated from design-tokens.json
 * Source of truth: design-tokens.json
 */

:root {
  /* Primitive Colors */
  --primitive-color-primary-purple: #8b5cf6; /* Primary brand purple */
  --primitive-color-primary-purple-hover: #a78bfa; /* Primary purple on hover */
  --primitive-color-secondary-pink: #ec4899; /* Secondary brand pink */
  --primitive-color-secondary-pink-hover: #f472b6; /* Secondary pink on hover */
  --primitive-color-background-dark: #0a0015; /* Dark background base */
  --primitive-color-background-darker: #050008; /* Darker background accent */
  --primitive-color-text-white: #ffffff; /* Primary text white */
  --primitive-color-text-secondary: #c9cbe2; /* Secondary text gray */
  --primitive-color-text-light: #aeb1c6; /* Light text gray */
  --primitive-color-semantic-success: #22c55e; /* Success/positive action */
  --primitive-color-semantic-success-light: #4ade80; /* Success light variant */
  --primitive-color-semantic-error: #ef4444; /* Error/destructive action */
  --primitive-color-semantic-error-dark: #dc2626; /* Error dark variant */
  --primitive-color-semantic-error-darker: #991b1b; /* Error darkest variant */
  --primitive-color-semantic-error-light: #f87171; /* Error light variant */
  --primitive-color-semantic-error-lighter: #fca5a5; /* Error lighter variant */
  --primitive-color-semantic-warning: #f59e0b; /* Warning/caution */
  --primitive-color-semantic-warning-light: #fbbf24; /* Warning light variant */
  --primitive-color-semantic-warning-bold: #f97316; /* Warning bold variant */
  --primitive-color-semantic-info: #38bdf8; /* Information/neutral */
  --primitive-color-semantic-info-light: #22d3ee; /* Info light variant (cyan) */
  --primitive-color-semantic-purple: #7c3aed; /* Purple accent */
  --primitive-color-semantic-purple-light: #a78bfa; /* Purple light variant */
  --primitive-color-semantic-rose: #f43f5e; /* Rose/pink accent */
  --primitive-color-semantic-rose-light: #fb7185; /* Rose light variant */
  --primitive-color-semantic-discord-blue: #5865f2; /* Discord brand blue */
  --primitive-color-semantic-discord-red: #ed4245; /* Discord red variant */
  --primitive-color-semantic-brown-dark: #713f12; /* Dark brown/tan */
  --primitive-color-semantic-blue-dark: #4752c4; /* Dark blue variant */
  --primitive-color-semantic-green-dark: #052e16; /* Dark green variant */
  --primitive-color-semantic-tier-bronze: #8c5a2b; /* Bronze contributor tier accent */
  --primitive-color-semantic-tier-silver: #52525b; /* Silver contributor tier accent */
  --primitive-color-semantic-tier-gold: #92720a; /* Gold contributor tier accent */
  --primitive-color-semantic-tier-platinum: #1d4f7a; /* Platinum contributor tier accent */
  --primitive-color-neutral-white: #ffffff; /* Pure white */
  --primitive-color-neutral-gray-100: #f8fafc; /* Very light gray */
  --primitive-color-neutral-gray-200: #e0e5ec; /* Light gray */
  --primitive-color-neutral-gray-300: #d2d2d7; /* Medium-light gray */
  --primitive-color-neutral-gray-600: #666666; /* Medium gray */
  --primitive-color-neutral-gray-800: #0a0a0a; /* Dark gray */
  --primitive-color-neutral-gray-900: #0d1117; /* Darkest gray */
  --primitive-color-neutral-black: #000000; /* Pure black */

  /* Semantic fallbacks (gothMommy defaults) — apply until themes.css's
     [data-theme="..."] block loads/matches, so nothing ever renders
     unstyled or falls through to a raw purple primitive. */
  --background: linear-gradient(135deg, #050505 0%, #0f0f0f 50%, #0d1117 100%);
  --card-background: #141414;
  --accent: #c9cbe2;
  --text-primary: #aeb1c6;
  --text-secondary: #c9cbe2;
  --border: rgba(82, 82, 82, 0.3);
  --primary-button: #ffffff;
  --secondary-button: #2a2a2a;
  --glow-color: rgba(82, 82, 82, 0.3);
  --surface-elevated: #1f1f1f;

  /* Primitive Radius */
  --primitive-radius-xs: 4px; /* Extra small border radius */
  --primitive-radius-sm: 6px; /* Small border radius */
  --primitive-radius-md: 8px; /* Medium border radius */
  --primitive-radius-lg: 12px; /* Large border radius */
  --primitive-radius-xl: 16px; /* Extra large border radius */
  --primitive-radius-2xl: 20px; /* 2x large border radius */
  --primitive-radius-3xl: 24px; /* 3x large border radius */
  --primitive-radius-full: 999px; /* Fully rounded (pill) */

  /* Primitive Shadows */
  --primitive-shadow-soft: 0 16px 40px rgba(7, 4, 14, 0.6); /* Soft shadow for elevated content */
  --primitive-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.55); /* Strong shadow for modals */
  --primitive-shadow-none: none; /* No shadow */

  /* Primitive Duration */
  --primitive-duration-instant: 0ms; /* No animation */
  --primitive-duration-micro: 50ms; /* Ultra-fast micro interaction */
  --primitive-duration-very-short: 100ms; /* Very short transition */
  --primitive-duration-short: 150ms; /* Short transition */
  --primitive-duration-base: 200ms; /* Base transition */
  --primitive-duration-medium: 250ms; /* Medium transition */
  --primitive-duration-long: 300ms; /* Long transition */
  --primitive-duration-longer: 400ms; /* Longer transition */
  --primitive-duration-longest: 500ms; /* Longest transition */
  --primitive-duration-extra: 800ms; /* Extra long animation */
  --primitive-duration-slow: 1200ms; /* Slow animation (blink, fade) */
  --primitive-duration-slower: 1500ms; /* Slower animation */
  --primitive-duration-slowest: 2000ms; /* Slowest animation */
  --primitive-duration-sidebar: 300ms; /* Sidebar collapse/expand */

  /* Primitive Easing */
  --primitive-easing-ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* Ease out curve */
  --primitive-easing-ease-in: cubic-bezier(0.32, 0, 0.67, 0); /* Ease in curve */
  --primitive-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Ease in-out curve */
  --primitive-easing-ease-out-snappy: cubic-bezier(0.22, 1, 0.36, 1); /* Snappy overshoot-style ease out, used for stage turn/reaction motion */

  /* Primitive Sizes */
  --primitive-icon-xs: 16px; /* Extra small icon */
  --primitive-icon-sm: 20px; /* Small icon */
  --primitive-icon-md: 24px; /* Medium icon (standard) */
  --primitive-icon-lg: 32px; /* Large icon */
  --primitive-icon-xl: 48px; /* Extra large icon */
  --primitive-width-sidebar: 260px; /* Sidebar full width */
  --primitive-width-sidebar-collapsed: 72px; /* Sidebar collapsed width */
  --primitive-size-border-thin: 1px; /* Thin border width */
  --primitive-size-border-xs: 2px; /* Extra small border */
  --primitive-size-border-sm: 3px; /* Small border */
  --primitive-size-border-md: 4px; /* Medium border */
  --primitive-size-border-lg: 6px; /* Large border */
  --primitive-size-component-2xs: 7px; /* 2x small component */
  --primitive-size-component-xs: 5px; /* Extra small component size */
  --primitive-size-component-sm: 10px; /* Small component size */
  --primitive-size-component-sm-md: 11px; /* Small-medium component */
  --primitive-size-component-sm-lg: 13px; /* Small-large component */
  --primitive-size-component-md-sm: 15px; /* Medium-small component */
  --primitive-size-component-md: 14px; /* Medium component size */
  --primitive-size-component-md-lg: 18px; /* Medium-large component */
  --primitive-size-component-md-xl: 22px; /* Medium-extra large */
  --primitive-size-component-lg-sm: 25px; /* Large-small component */
  --primitive-size-component-lg-md: 26px; /* Large-medium component */
  --primitive-size-component-lg: 20px; /* Large component size */
  --primitive-size-component-lg-lg: 28px; /* Large-large component */
  --primitive-size-component-lg-xl: 30px; /* Large-extra large */
  --primitive-size-component-xl-sm: 34px; /* Extra large-small */
  --primitive-size-component-xl-md: 35px; /* Extra large-medium */
  --primitive-size-component-xl-lg: 36px; /* Extra large-large */
  --primitive-size-component-xl: 40px; /* Extra large component size */
  --primitive-size-component-xl-xl: 44px; /* Extra large-extra large (touch) */
  --primitive-size-component-2xl-sm: 46px; /* 2x large-small */
  --primitive-size-component-2xl-md: 50px; /* 2x large-medium */
  --primitive-size-component-2xl-lg: 54px; /* 2x large-large */
  --primitive-size-component-2xl: 60px; /* 2x large component size */
  --primitive-size-component-3xl-sm: 70px; /* 3x large-small */
  --primitive-size-component-3xl: 80px; /* 3x large component size */
  --primitive-size-component-3xl-lg: 88px; /* 3x large-large */
  --primitive-size-component-3xl-xl: 86px; /* 3x large-extra large */
  --primitive-size-component-4xl: 100px; /* 4x large component size */
  --primitive-size-component-4xl-lg: 110px; /* 4x large-large */
  --primitive-size-layout-xs: 120px; /* Extra small container width */
  --primitive-size-layout-sm: 180px; /* Small container width */
  --primitive-size-layout-md: 280px; /* Medium container width */
  --primitive-size-layout-lg: 420px; /* Large container width (max toast) */
  --primitive-size-layout-xl: 520px; /* Extra large container width */
  --primitive-size-breakpoint-mobile: 320px; /* Mobile breakpoint */
  --primitive-size-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --primitive-size-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --primitive-size-breakpoint-wide: 1280px; /* Wide desktop breakpoint */
  --primitive-size-breakpoint-ultrawide: 1920px; /* Ultra-wide breakpoint */
  --primitive-size-container-sm: 250px; /* Small container */
  --primitive-size-container-md: 440px; /* Medium container */
  --primitive-size-container-lg: 460px; /* Large container */
  --primitive-size-container-xl: 500px; /* Extra large container */
  --primitive-size-container-2xl: 1000px; /* 2x large container */

  /* Semantic Spacing */
  --semantic-spacing-2xs: 2px; /* 2x small spacing (tiny gaps) */
  --semantic-spacing-xs: 4px; /* Extra small spacing */
  --semantic-spacing-sm: 8px; /* Small spacing */
  --semantic-spacing-md: 16px; /* Medium spacing (default) */
  --semantic-spacing-lg: 24px; /* Large spacing */
  --semantic-spacing-xl: 32px; /* Extra large spacing */
  --semantic-spacing-2xl: 48px; /* 2x large spacing */
  --semantic-spacing-3xl: 64px; /* 3x large spacing */
  --semantic-spacing-touch: 44px; /* Touch target minimum (mobile) */

  /* Semantic Colors */
  --semantic-color-primary-button: #8b5cf6; /* Primary button background */
  --semantic-color-primary-button-hover: #a78bfa; /* Primary button hover state */
  --semantic-color-secondary-button: #ec4899; /* Secondary button background */
  --semantic-color-secondary-button-hover: #f472b6; /* Secondary button hover state */
  --semantic-color-record-button: #ef4444; /* Record button (red) */
  --semantic-color-record-button-hover: #dc2626; /* Record button hover */
  --semantic-color-background: #0a0015; /* Page background */
  --semantic-color-text-primary: #ffffff; /* Primary text color */
  --semantic-color-text-secondary: #c9cbe2; /* Secondary text color */
  --semantic-color-text-light: #aeb1c6; /* Light text color */
  --semantic-color-accent: #8b5cf6; /* Accent color for highlights */
  --semantic-color-border: rgba(139, 92, 246, 0.25); /* Border color (semi-transparent purple) */
  --semantic-color-success: #22c55e; /* Success state */
  --semantic-color-success-light: #4ade80; /* Success light variant */
  --semantic-color-error: #ef4444; /* Error state */
  --semantic-color-error-dark: #dc2626; /* Error dark variant */
  --semantic-color-error-light: #f87171; /* Error light variant */
  --semantic-color-warning: #f59e0b; /* Warning state */
  --semantic-color-warning-light: #fbbf24; /* Warning light variant */
  --semantic-color-info: #38bdf8; /* Info state */
  --semantic-color-info-light: #22d3ee; /* Info light variant */
  --semantic-color-purple: #7c3aed; /* Purple accent */
  --semantic-color-purple-light: #a78bfa; /* Purple light variant */
  --semantic-color-rose: #f43f5e; /* Rose accent */
  --semantic-color-rose-light: #fb7185; /* Rose light variant */
  --semantic-color-discord-blue: #5865f2; /* Discord blue */
  --semantic-color-discord-red: #ed4245; /* Discord red */
  --semantic-color-brown-dark: #713f12; /* Dark brown */
  --semantic-color-blue-dark: #4752c4; /* Dark blue */
  --semantic-color-green-dark: #052e16; /* Dark green */
  --semantic-color-tier-bronze: #8c5a2b; /* Bronze contributor tier accent */
  --semantic-color-tier-silver: #52525b; /* Silver contributor tier accent */
  --semantic-color-tier-gold: #92720a; /* Gold contributor tier accent */
  --semantic-color-tier-platinum: #1d4f7a; /* Platinum contributor tier accent */
  --semantic-color-neutral-white: #ffffff; /* Pure white */
  --semantic-color-neutral-light: #f8fafc; /* Very light gray */
  --semantic-color-neutral-medium: #d2d2d7; /* Medium gray */
  --semantic-color-neutral-dark: #0a0a0a; /* Dark gray */
  --semantic-color-scrim: rgba(10, 10, 10, 0.55); /* Overlay scrim behind drawers/modals */

  /* Semantic Shadows */
  --semantic-shadow-none: none; /* undefined */
  --semantic-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* undefined */
  --semantic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); /* undefined */
  --semantic-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.25); /* undefined */
  --semantic-shadow-soft: 0 16px 40px rgba(7, 4, 14, 0.6); /* undefined */
  --semantic-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.55); /* undefined */

  /* Semantic Typography */
  --semantic-typography-heading-xl-size: 32px; /* Page heading */
  --semantic-typography-heading-xl-weight: 700;
  --semantic-typography-heading-xl-height: 1.3;
  --semantic-typography-heading-lg-size: 24px; /* Section heading */
  --semantic-typography-heading-lg-weight: 700;
  --semantic-typography-heading-lg-height: 1.3;
  --semantic-typography-heading-md-size: 18px; /* Subsection heading */
  --semantic-typography-heading-md-weight: 600;
  --semantic-typography-heading-md-height: 1.4;
  --semantic-typography-body-lg-size: 16px; /* Large body text (WCAG minimum) */
  --semantic-typography-body-lg-weight: 400;
  --semantic-typography-body-lg-height: 1.5;
  --semantic-typography-body-base-size: 16px; /* Standard body text */
  --semantic-typography-body-base-weight: 400;
  --semantic-typography-body-base-height: 1.5;
  --semantic-typography-body-sm-size: 14px; /* Small body text */
  --semantic-typography-body-sm-weight: 400;
  --semantic-typography-body-sm-height: 1.5;
  --semantic-typography-label-size: 14px; /* Form labels and UI labels */
  --semantic-typography-label-weight: 600;
  --semantic-typography-label-height: 1.4;
  --semantic-typography-caption-size: 12px; /* Captions and small text */
  --semantic-typography-caption-weight: 500;
  --semantic-typography-caption-height: 1.4;

  /* Semantic Opacity */
  --semantic-opacity-full: 1; /* Fully opaque */
  --semantic-opacity-high: 0.95; /* Very high opacity (95%) */
  --semantic-opacity-semi-high: 0.9; /* High opacity (90%) */
  --semantic-opacity-semi-full: 0.85; /* 85% opacity */
  --semantic-opacity-medium-high: 0.75; /* 75% opacity */
  --semantic-opacity-medium: 0.7; /* 70% opacity */
  --semantic-opacity-medium-low: 0.6; /* 60% opacity */
  --semantic-opacity-low: 0.5; /* 50% opacity */
  --semantic-opacity-disabled: 0.38; /* Disabled state (38%) */
  --semantic-opacity-very-low: 0.25; /* 25% opacity */
  --semantic-opacity-minimal: 0.15; /* Minimal opacity (15%) */
}