/**
 * @file src/ui/tokens/primitive.css
 * @description Primitive Design Tokens - Rohe Werte ohne semantische Bedeutung.
 *
 * Hierarchie: Primitive → Semantic → Component
 *
 * NIEMALS direkt in Komponenten verwenden!
 * Stattdessen semantic.css Tokens nutzen.
 */

:root {
  /**
   * @token-category Brand Colors
   * @token-description Core brand palette for audics UI surfaces and accents.
   */
  /**
   * @token color-brand-yellow
   * @description Primary brand accent color.
   * @usage CTAs, active states, highlights.
   * @value #fae300
   */
  --color-brand-yellow: #fae300;
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-hover: #e3cc00;
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-faded: #faef91;
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-extra-faded: #fffdeb;
  /**
   * @token-category Brand Colors
   * @token color-brand-black
   * @description Primary brand black for high-contrast text and surfaces.
   * @usage Headers, dark UI elements, emphasis.
   * @value #121212
   */
  --color-brand-black: #121212;
  /**
   * @token-category Brand Colors
   * @token color-sonic-void
   * @description Sonic Architect void base from Design.md.
   * @usage HUD glass tint, spatial operating-system background depth.
   * @value #131313
   */
  --color-sonic-void: #131313;
  /**
   * @token-category Brand Colors
   */
  --color-brand-gray: #1a1a1a;
  /**
   * @token-category Brand Colors
   */
  --color-brand-green: #abd037;
  /**
   * @token-category Brand Colors
   */
  --color-brand-orange: #f58020;
  /**
   * @token-category Brand Colors
   */
  --color-brand-red: #d6001c;
  /**
   * @token-category Brand Colors
   */
  --color-brand-blue: #339cff;
  /**
   * @token-category Brand Colors
   */
  --color-brand-cyan: #42f9ff;
  /**
   * @token-category Brand Colors
   */
  --color-brand-cyan-alpha-50: rgba(66, 249, 255, 0.5);
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-alpha-50: rgba(250, 227, 0, 0.5);
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-alpha-60: rgba(250, 227, 0, 0.6);
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-alpha-85: rgba(250, 227, 0, 0.85);
  /**
   * @token-category Brand Colors
   */
  --color-brand-yellow-alpha-90: rgba(250, 227, 0, 0.9);

  /**
   * @token-category Background Colors
   * @token-description Neutral background shades for light and dark surfaces.
   */
  /**
   * @token-category Background Colors
   * @token color-bg-light
   * @description Primary light background.
   * @usage App background, cards.
   * @value #f7f7f5
   */
  --color-bg-light: #f7f7f5;
  /**
   * @token-category Background Colors
   */
  --color-bg-secondary-light: #fcfcfc;
  /**
   * @token-category Background Colors
   */
  --color-bg-tertiary-light: #d9d9d7;
  /**
   * @token-category Background Colors
   */
  --color-bg-hover-light: #f1f1f1;
  /**
   * @token-category Background Colors
   * @token color-bg-dark
   * @description Primary dark background.
   * @usage Dark surfaces, modal backdrops.
   * @value #1f1e1c
   */
  --color-bg-dark: #1f1e1c;
  /**
   * @token-category Background Colors
   */
  --color-bg-secondary-dark: #2a2926;
  /**
   * @token-category Background Colors
   */
  --color-bg-tertiary-dark: #383834;
  /**
   * @token-category Background Colors
   */
  --color-bg-hover-dark: #454542;

  /**
   * @token-category Utility Colors
   * @token-description Utility colors used for contrast, transparency, and resets.
   */
  /**
   * @token-category Utility Colors
   * @token color-white
   * @description Pure white utility color.
   * @usage Text on dark backgrounds, borders.
   * @value #ffffff
   */
  --color-white: #ffffff;
  /**
   * @token-category Utility Colors
   */
  --color-black: #000000;
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-04: rgba(0, 0, 0, 0.04);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-06: rgba(0, 0, 0, 0.06);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-45: rgba(0, 0, 0, 0.45);
  /**
   * @token-category Utility Colors
   */
  --color-black-alpha-50: rgb(0 0 0 / 0.5);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-08: rgba(255, 255, 255, 0.08);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-15: rgba(255, 255, 255, 0.15);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-16: rgba(255, 255, 255, 0.16);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  /**
   * @token-category Utility Colors
   */
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  /**
   * @token-category Utility Colors
   */
  --color-transparent: transparent;
  /* Light Theme Grays */
  /**
   * @token-category Utility Colors
   */
  --color-gray-900: #1a1a1a;
  /**
   * @token-category Utility Colors
   */
  --color-gray-700: #5e5555;
  /**
   * @token-category Utility Colors
   */
  --color-gray-500: #888888;
  /**
   * @token-category Utility Colors
   */
  --color-gray-300: #d9d9d9;
  /**
   * @token-category Utility Colors
   */
  --color-gray-200: #d0d0d0;
  /* Dark Theme Grays */
  /**
   * @token-category Utility Colors
   */
  --color-gray-100: #f7f7f5;
  /**
   * @token-category Utility Colors
   */
  --color-gray-150: #e6e6e3;
  /**
   * @token-category Utility Colors
   */
  --color-gray-600: #666665;
  /**
   * @token-category Utility Colors
   */
  --color-gray-550: #555555;
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-100-alpha-50: rgba(100, 100, 100, 0.5);
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-120-alpha-40: rgba(120, 120, 120, 0.4);
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-160-alpha-70: rgba(160, 160, 160, 0.7);
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-180-alpha-25: rgba(180, 180, 180, 0.25);
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-180-alpha-60: rgba(180, 180, 180, 0.6);
  /**
   * @token-category Utility Colors
   */
  --color-gray-rgb-200-alpha-30: rgba(200, 200, 200, 0.3);
  /* Dark Theme Accents */
  /**
   * @token-category Utility Colors
   */
  --color-olive-700: #5c5a30;
  /**
   * @token-category Utility Colors
   */
  --color-olive-800: #4a4820;
  /**
   * @token-category Utility Colors
   */
  --color-olive-900: #3d3b1a;

  /**
   * @token-category Typography
   * @token-description Type families, sizes, weights, and line heights.
   */
  /**
   * @token-category Typography
   * @token font-family-primary
   * @description Primary UI typeface stack.
   * @usage Body text, UI labels.
   */
  --font-family-primary: "Inter", sans-serif;

  /**
   * @token-category Sonic Architect Colors
   */
  --color-sonic-selection: #f4d03f;
  /**
   * @token-category Editor Colors
   */
  --color-editor-edge-label-border: rgba(15, 76, 158, 0.95);
  /**
   * @token-category Editor Colors
   */
  --color-editor3d-background-light: #f0f0f3;
  --color-editor3d-hemisphere-sky-light: #ddeeff;
  --color-editor3d-hemisphere-ground-light: #606070;
  --color-editor3d-surface-architecture-light: #f5f5f0;
  --color-editor3d-background-dark: #1a1a1e;
  --color-editor3d-hemisphere-sky-dark: #2a3340;
  --color-editor3d-hemisphere-ground-dark: #303038;
  --color-editor3d-surface-architecture-dark: #d8d8d2;

  /**
   * @token-category Gauge Colors
   */
  --color-gauge-green: oklch(0.65 0.15 145);
  /**
   * @token-category Gauge Colors
   */
  --color-gauge-yellow: oklch(0.85 0.15 85);
  /**
   * @token-category Gauge Colors
   */
  --color-gauge-red: oklch(0.5 0.2 25);
  /**
   * @token-category Gauge Colors
   */
  --color-gauge-blue: oklch(0.35 0.12 250);
  /**
   * @token-category Gauge Colors
   */
  --color-gauge-cyan: oklch(0.55 0.14 200);

  /**
   * @token-category Spacing
   * @token-description Spacing scale based on 8px grid.
   */
  /**
   * @token-category Spacing
   */
  --space-0: 0;
  /**
   * @token-category Spacing
   */
  --space-0-25: 0.125rem; /* 2px */
  /**
   * @token-category Spacing
   */
  --space-0-5: 0.25rem; /* 4px */
  /**
   * @token-category Spacing
   */
  --space-1: 0.5rem; /* 8px */
  /**
   * @token-category Spacing
   */
  --space-1-5: 0.75rem; /* 12px */
  /**
   * @token-category Spacing
   * @token space-2
   * @description Base spacing unit (16px).
   * @usage Common padding/margins.
   * @value 1rem
   */
  --space-2: 1rem; /* 16px */
  /**
   * @token-category Spacing
   */
  --space-2-5: 1.25rem; /* 20px */
  /**
   * @token-category Spacing
   */
  --space-3: 1.5rem; /* 24px */
  /**
   * @token-category Spacing
   */
  --space-4: 2rem; /* 32px */
  /**
   * @token-category Spacing
   */
  --space-5: 2.5rem; /* 40px */
  /**
   * @token-category Spacing
   */
  --space-6: 3rem; /* 48px */
  /**
   * @token-category Spacing
   */
  --space-8: 4rem; /* 64px */
  /**
   * @token-category Spacing
   */
  --space-10: 5rem; /* 80px */
  /**
   * @token-category Spacing
   */
  --space-12: 6rem; /* 96px */

  /* ========== Font Sizes ========== */
  /**
   * @token-category Typography
   */
  --font-size-xs: 0.5rem; /* 8px - nur für Icons */
  /**
   * @token-category Typography
   */
  --font-size-sm: 0.625rem; /* 10px */
  /**
   * @token-category Typography
   * @token font-size-base
   * @description Standard UI font size.
   * @usage Body text, labels.
   * @value 0.75rem
   */
  --font-size-base: 0.75rem; /* 12px - Standard */
  /**
   * @token-category Typography
   */
  --font-size-md: 0.875rem; /* 14px */
  /**
   * @token-category Typography
   */
  --font-size-lg: 1rem; /* 16px */
  /**
   * @token-category Typography
   */
  --font-size-xl: 1.125rem; /* 18px */
  /**
   * @token-category Typography
   */
  --font-size-2xl: 1.25rem; /* 20px */
  /**
   * @token-category Typography
   */
  --font-size-3xl: 1.5rem; /* 24px */
  /**
   * @token-category Typography
   */
  --font-size-4xl: 2rem; /* 32px */
  /**
   * @token-category Typography
   */
  --font-size-5xl: 3rem; /* 48px */

  /* ========== Font Weights (audics) ========== */
  /**
   * @token-category Typography
   */
  --font-weight-light: 300;
  /**
   * @token-category Typography
   * @token font-weight-normal
   * @description Default weight for body text.
   * @usage Paragraphs, labels.
   * @value 400
   */
  --font-weight-normal: 400;
  /**
   * @token-category Typography
   */
  --font-weight-medium: 500;
  /**
   * @token-category Typography
   */
  --font-weight-semibold: 550;
  /**
   * @token-category Typography
   */
  --font-weight-bold: 600;
  /**
   * @token-category Typography
   */
  --font-weight-extrabold: 700;
  /**
   * @token-category Typography
   */
  --font-weight-black: 900;

  /* ========== Line Heights ========== */
  /**
   * @token-category Typography
   */
  --line-height-tight: 1.25;
  /**
   * @token-category Typography
   * @token line-height-normal
   * @description Default line height for readable text.
   * @usage Body text, tables.
   * @value 1.5
   */
  --line-height-normal: 1.5;
  /**
   * @token-category Typography
   */
  --line-height-relaxed: 1.75;

  /**
   * @token-category Border
   * @token-description Corner radius values for UI elements.
   */
  /**
   * @token-category Border
   */
  --radius-none: 0;
  /**
   * @token-category Border
   */
  --radius-sm: 0.125rem; /* 2px */
  /**
   * @token-category Border
   * @token radius-base
   * @description Default corner radius.
   * @usage Buttons, inputs, cards.
   * @value 0.25rem
   */
  --radius-base: 0.25rem; /* 4px */
  /**
   * @token-category Border
   */
  --radius-md: 0.5rem; /* 8px */
  /**
   * @token-category Border
   */
  --radius-lg: 0.75rem; /* 12px */
  /**
   * @token-category Border
   */
  --radius-xl: 1rem; /* 16px */
  /**
   * @token-category Border
   */
  --radius-2xl: 1.5rem; /* 24px */
  /**
   * @token-category Border
   */
  --radius-full: 9999px;

  /**
   * @token-category Shadow
   * @token-description Elevation levels for surfaces.
   */
  /**
   * @token-category Shadow
   */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /**
   * @token-category Shadow
   * @token shadow-base
   * @description Default surface elevation.
   * @usage Cards, panels.
   */
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  /**
   * @token-category Shadow
   */
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  /**
   * @token-category Shadow
   */
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /**
   * @token-category Shadow
   */
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /**
   * @token-category Shadow
   */
  --shadow-header-light:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /**
   * @token-category Shadow
   */
  --shadow-header-dark:
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  /**
   * @token-category Shadow
   */
  --shadow-etv-catalog: 0 8px 24px rgba(0, 0, 0, 0.3);
  /**
   * @token-category Shadow
   */
  --shadow-etv-card-float:
    0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);

  /**
   * @token-category Animation
   * @token-description Motion timings and easing curves.
   */
  /**
   * @token-category Animation
   */
  --duration-fast: 150ms;
  /**
   * @token-category Animation
   * @token duration-base
   * @description Default transition duration.
   * @usage Hover and focus transitions.
   * @value 200ms
   */
  --duration-base: 200ms;
  /**
   * @token-category Animation
   */
  --duration-slow: 300ms;
  /**
   * @token-category Animation
   */
  --duration-slower: 500ms;
  /**
   * @token-category Animation
   */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /**
   * @token-category Animation
   */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  /**
   * @token-category Animation
   * @token ease-in-out
   * @description Standard ease-in-out curve.
   * @usage Panel transitions, modal animations.
   * @value cubic-bezier(0.4, 0, 0.2, 1)
   */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}