/**
 * @file src/ui/tokens/semantic.css
 * @description Semantic Design Tokens - Bedeutungsvolle Namen.
 *
 * Referenziert primitive.css Tokens.
 * Diese Tokens in Komponenten verwenden!
 */

:root {
  /* ========== Accent Colors ========== */
  /**
   * @token-category Accent Colors
   * @token-description Primäre Interaktionsfarben für CTAs und aktive Elemente.
   */
  /**
   * @token-category Accent Colors
   * @token color-accent-primary
   * @description Hauptakzentfarbe für primäre Aktionen.
   * @usage Primary Buttons, aktive Tabs, Selected States.
   * @value var(--color-brand-yellow)
   */
  --color-accent-primary: var(--color-brand-yellow);
  /**
   * @token-category Interactive
   */
  --color-accent-primary-hover: var(--color-brand-yellow-hover);
  /**
   * @token-category Accent Colors
   */
  --color-accent-primary-foreground: var(--color-brand-black);
  /**
   * @token-category Accent Colors
   */
  --color-accent-secondary: var(--color-brand-yellow-faded);
  /**
   * @token-category Accent Colors
   */
  --color-accent-tertiary: var(--color-brand-yellow-extra-faded);
  /**
   * @token-category Accent Colors
   */
  --color-separator: var(--color-olive-700);

  /* ========== Cell Highlighting ========== */
  /**
   * @token-category Cell Colors
   */
  --color-cell-highlight: var(--color-brand-yellow-faded);
  /**
   * @token-category Sonic Architect Colors
   */
  --color-spatial-precision: var(--color-brand-cyan);
  /**
   * @token-category Sonic Architect Colors
   */
  --color-correlation-highlight: var(--color-brand-cyan);

  /* ========== Luminous Bar (Absorption Visualization) ========== */
  /* Element Rows: Yellow (editable, actionable) */
  /**
   * @token-category Cell Colors
   */
  --color-cell-bar-base: var(--color-brand-yellow-alpha-60);
  /**
   * @token-category Cell Colors
   */
  --color-cell-bar-bright: var(--color-brand-yellow-alpha-90);
  /**
   * @token-category Cell Colors
   */
  --color-cell-bar-highlight: var(--color-white-alpha-30);
  /**
   * @token-category Cell Colors
   */
  --color-cell-glow: var(--color-brand-yellow-alpha-50);
  /* Tag Rows: Gray (aggregate, neutral) */
  /**
   * @token-category Cell Colors
   */
  --color-tag-bar-base: var(--color-gray-rgb-120-alpha-40);
  /**
   * @token-category Cell Colors
   */
  --color-tag-bar-bright: var(--color-gray-rgb-180-alpha-60);
  /**
   * @token-category Cell Colors
   */
  --color-tag-bar-highlight: var(--color-white-alpha-15);
  /**
   * @token-category Cell Colors
   */
  --color-tag-bar-glow: var(--color-gray-rgb-200-alpha-30);

  /* ========== Row Hover Overlay ========== */
  /**
   * @token-category Interactive
   */
  --color-row-hover-overlay: var(--color-black-alpha-04);

  /* ========== Semantic Status Colors ========== */
  /**
   * @token-category Feedback Colors
   * @token-description Statusfarben für Erfolg, Warnung und Fehler.
   */
  /**
   * @token-category Feedback Colors
   */
  --color-success: var(--color-brand-green);
  /**
   * @token-category Feedback Colors
   */
  --color-warning: var(--color-brand-orange);
  /**
   * @token-category Feedback Colors
   */
  --color-error: var(--color-brand-red);
  /**
   * @token-category Feedback Colors
   */
  --color-danger: var(--color-error);
  /**
   * @token-category Feedback Colors
   */
  --color-info: var(--color-brand-blue);
  /**
   * @token-category Text Colors
   * @token-description Foreground colors for status surfaces.
   */
  --color-text-on-success: var(--color-black);
  /**
   * @token-category Text Colors
   */
  --color-text-on-warning: var(--color-black);
  /**
   * @token-category Text Colors
   */
  --color-text-on-accent: var(--color-accent-primary-foreground);

  /* ========== Border Colors ========== */
  /**
   * @token-category Border Colors
   */
  --color-border: var(--color-bg-tertiary-light);
  /**
   * @token-category Border Colors
   */
  --color-border-subtle: var(--color-bg-secondary-light);
  /**
   * @token-category Border Colors
   */
  --color-border-strong: var(--color-gray-700);

  /* ========== Foreground Colors ========== */
  /**
   * @token-category Text Colors
   */
  --color-fg-light: var(--color-gray-900);
  /**
   * @token-category Text Colors
   */
  --color-fg-secondary-light: var(--color-gray-700);
  /**
   * @token-category Text Colors
   */
  --color-fg-muted-light: var(--color-gray-500);
  /**
   * @token-category Text Colors
   */
  --color-fg-tertiary-light: var(--color-gray-300);
  /**
   * @token-category Text Colors
   */
  --color-fg-dark: var(--color-gray-100);
  /**
   * @token-category Text Colors
   */
  --color-fg-secondary-dark: var(--color-gray-150);
  /**
   * @token-category Text Colors
   */
  --color-fg-muted-dark: var(--color-gray-500);
  /**
   * @token-category Text Colors
   */
  --color-fg-tertiary-dark: var(--color-gray-600);

  /* ========== Semantic Background (Default: Light) ========== */
  /**
   * @token-category Surface Colors
   */
  --color-background: var(--color-bg-light);
  /**
   * @token-category Surface Colors
   */
  --color-background-panel: var(--color-bg-light);
  /**
   * @token-category Surface Colors
   */
  --color-background-secondary: var(--color-bg-secondary-light);
  /**
   * @token-category Surface Colors
   */
  --color-background-tertiary: var(--color-bg-tertiary-light);
  /**
   * @token-category Interactive
   */
  --color-background-hover: var(--color-bg-hover-light);
  /**
   * @token-category Surface Colors
   * @description Sonic Architect void base for HUD surfaces.
   */
  --color-surface-void: var(--color-sonic-void);

  /* ========== Semantic Foreground (Default: Light) ========== */
  /**
   * @token-category Text Colors
   */
  --color-foreground: var(--color-fg-light);
  /**
   * @token-category Text Colors
   */
  --color-foreground-secondary: var(--color-fg-secondary-light);
  /**
   * @token-category Text Colors
   */
  --color-foreground-muted: var(--color-fg-muted-light);
  /**
   * @token-category Text Colors
   */
  --color-foreground-tertiary: var(--color-fg-tertiary-light);

  /* ========== Scrollbar Colors (Default: Light) ========== */
  /**
   * @token-category Interactive
   */
  --color-scrollbar-thumb: var(--color-gray-600);
  /**
   * @token-category Interactive
   */
  --color-scrollbar-thumb-hover: var(--color-gray-500);

  /* ========== Input Colors (Default: Light) ========== */
  /**
   * @token-category Surface Colors
   */
  --color-input-background: var(--color-bg-light);
  /**
   * @token-category Text Colors
   */
  --color-input-foreground: var(--color-fg-light);
  /**
   * @token-category Border Colors
   */
  --color-input-border: var(--color-gray-200);
  /**
   * @token-category Accent Colors
   */
  --color-input-accent: var(--color-accent-primary);

  /* ========== Chart Colors ========== */
  --color-chart-version-baseline: var(--color-gray-500);
  --color-chart-version-active: var(--color-foreground);
  --color-chart-version-dimmed: var(--color-foreground-secondary);
  --color-chart-active-glow: var(--color-accent-primary);
  --color-chart-threshold: var(--color-gray-900);
  --color-chart-tolerance-band: var(--color-gray-300);
  --color-chart-measurement: var(--color-gray-500);
  --chart-version-dimmed-opacity: 0.58;

  /* ========== Header Colors ========== */
  /**
   * @token-category Text Colors
   */
  --color-header-top-level: var(--color-foreground);
  /**
   * @token-category Text Colors
   */
  --color-header-panel: var(--color-foreground);
  /**
   * @token-category Text Colors
   */
  --color-header-sub-panel: var(--color-accent-primary);

  /* ========== Typography ========== */
  /**
   * @token-category Typography
   */
  --font-family: var(--font-family-primary);
  --text-role-display-font-family: var(--font-family-primary);
  --text-role-display-font-weight: var(--font-weight-bold);
  --text-role-display-letter-spacing: -0.03em;
  --text-role-heading-font-family: var(--font-family-primary);
  --text-role-heading-font-weight: var(--font-weight-semibold);
  --text-role-heading-letter-spacing: -0.02em;
  --text-role-body-font-family: var(--font-family-primary);
  --text-role-body-font-weight: var(--font-weight-normal);
  --text-role-body-letter-spacing: 0;
  --text-role-label-font-family: var(--font-family-primary);
  --text-role-label-font-weight: var(--font-weight-medium);
  --text-role-label-letter-spacing: 0.08em;
  --text-role-label-transform: uppercase;
  --text-role-telemetry-font-family: var(--font-family-primary);
  --text-role-telemetry-font-weight: var(--font-weight-medium);
  --text-role-telemetry-letter-spacing: 0.06em;
  --text-role-telemetry-transform: uppercase;
  --text-role-telemetry-numeric: tabular-nums;
  --text-role-caption-font-family: var(--font-family-primary);
  --text-role-caption-font-weight: var(--font-weight-normal);
  --text-role-caption-letter-spacing: 0.02em;

  /* ========== Component Color Aliases ========== */
  --color-modal-backdrop: var(--color-black-alpha-50);
  --color-dropdown-item-hover: var(--color-white-alpha-15);
  --color-etv-selection: var(--color-sonic-selection);
  --color-gauge-status-good: var(--color-gauge-green);
  --color-gauge-status-warning: var(--color-gauge-yellow);
  --color-gauge-status-danger: var(--color-gauge-red);
  --color-gauge-energy-low: var(--color-gauge-blue);
  --color-gauge-energy-cyan: var(--color-gauge-cyan);

  /* ========== Semantic Spacing ========== */
  /**
   * @token-category Spacing
   */
  --spacing-2xs: var(--space-0-25); /* 2px */
  /**
   * @token-category Spacing
   */
  --spacing-xs: var(--space-0-5); /* 4px */
  /**
   * @token-category Spacing
   */
  --spacing-sm: var(--space-1); /* 8px */
  /**
   * @token-category Spacing
   */
  --spacing-md: var(--space-2); /* 16px */
  /**
   * @token-category Spacing
   */
  --spacing-lg: var(--space-3); /* 24px */
  /**
   * @token-category Spacing
   */
  --spacing-xl: var(--space-4); /* 32px */

  /* ========== Semantic Font Sizes ========== */
  /**
   * @token-category Typography
   */
  --text-xs: var(--font-size-xs); /* 8px - nur für Icons */
  /**
   * @token-category Typography
   */
  --text-sm: var(--font-size-sm); /* 10px */
  /**
   * @token-category Typography
   */
  --text-base: var(--font-size-base); /* 12px */
  /**
   * @token-category Typography
   */
  --text-md: var(--font-size-md); /* 14px */
  /**
   * @token-category Typography
   */
  --text-lg: var(--font-size-lg); /* 16px */
  /**
   * @token-category Typography
   */
  --text-xl: var(--font-size-xl); /* 18px */
  /**
   * @token-category Typography
   */
  --text-2xl: var(--font-size-2xl); /* 20px */
  /**
   * @token-category Typography
   */
  --text-3xl: var(--font-size-3xl); /* 24px */
  /**
   * @token-category Typography
   */
  --text-4xl: var(--font-size-4xl); /* 32px */
  /**
   * @token-category Typography
   */
  --text-5xl: var(--font-size-5xl); /* 48px */

  /* ========== Semantic Border Radius ========== */
  /**
   * @token-category Border
   */
  --rounded-sm: var(--radius-sm); /* 2px */
  /**
   * @token-category Border
   */
  --rounded: var(--radius-md); /* 8px — unified border-radius (UI-BR8) */
  /**
   * @token-category Border
   */
  --rounded-md: var(--radius-md); /* 8px */
  /**
   * @token-category Border
   */
  --rounded-lg: var(--radius-lg); /* 12px */
  /**
   * @token-category Border
   */
  --rounded-full: var(--radius-full);

  /* ========== Animation & Transition ========== */
  /**
   * @token-category Animation
   */
  --duration-expand: 400ms;
  /**
   * @token-category Animation
   */
  --duration-collapse: 400ms;
  /**
   * @token-category Animation
   */
  --duration-fade: 200ms;

  /* ========== Layout Dimensions ========== */
  /**
   * @token-category Sizing
   */
  --height-table-row: 3em;
  /**
   * @token-category Sizing
   */
  --height-catalog-panel: 30em;
  /**
   * @token-category Sizing
   */
  --count-table-entries-max: 5;

  /* ========== Focus & Interactive States ========== */
  /**
   * @token-category Interactive
   */
  --focus-ring-color: var(--color-accent-primary);
  /**
   * @token-category Interactive
   */
  --focus-ring-width: 2px;
  /**
   * @token-category Interactive
   */
  --focus-ring-offset: 2px;

  /* ========== Shadows ========== */
  /**
   * @token-category Shadow
   */
  --shadow-header: var(--shadow-header-light);

  /* ========== Use-Case Buckets (Status Dots) ========== */
  /**
   * @token-category Status
   * @description Office/admin/call-center activities.
   */
  --color-use-case-office-bucket: var(--color-brand-blue);
  /**
   * @token-category Status
   * @description Education / teaching activities.
   */
  --color-use-case-education-bucket: var(--color-brand-green);
  /**
   * @token-category Status
   * @description Music / performance activities.
   */
  --color-use-case-music-bucket: var(--color-brand-red);
  /**
   * @token-category Status
   * @description Public-facing service / collaboration activities.
   */
  --color-use-case-public-bucket: var(--color-brand-orange);
  /**
   * @token-category Status
   * @description Fallback bucket for unknown / unspecified useCase.
   */
  --color-use-case-unspecified-bucket: var(--color-foreground-secondary);

  /* ========== Editor 3D Appearance (Default: Light) ========== */
  /**
   * @token-category Editor 3D
   * @description Theme-reactive SSOT for the editor 3D renderer (ERT.1).
   *   Read at runtime via resolveEditorAppearance(); hex values map to numeric
   *   THREE colors, intensities map to light intensities. Light/dark variants
   *   live in the [theme="light"] / [theme="dark"] blocks below.
   */
  --editor3d-background: var(--color-editor3d-background-light);
  --editor3d-light-ambient: 0.6;
  --editor3d-light-directional: 0.8;
  --editor3d-light-hemisphere: 0.8;
  --editor3d-hemisphere-sky: var(--color-editor3d-hemisphere-sky-light);
  --editor3d-hemisphere-ground: var(--color-editor3d-hemisphere-ground-light);
  --editor3d-surface-architecture: var(
    --color-editor3d-surface-architecture-light
  );
  --editor3d-floorplan-opacity: 0.8;
}

/* ========== Light Theme ========== */
[theme="light"] {
  color-scheme: light;
  --color-background: var(--color-bg-light);
  --color-background-panel: var(--color-bg-light);
  --color-background-secondary: var(--color-bg-secondary-light);
  --color-background-tertiary: var(--color-bg-tertiary-light);
  --color-background-hover: var(--color-bg-hover-light);

  --color-foreground: var(--color-fg-light);
  --color-foreground-secondary: var(--color-fg-secondary-light);
  --color-foreground-muted: var(--color-fg-muted-light);
  --color-foreground-tertiary: var(--color-fg-tertiary-light);

  --color-border: var(--color-bg-tertiary-light);
  --color-border-subtle: var(--color-bg-secondary-light);

  --color-input-background: var(--color-bg-light);
  --color-input-foreground: var(--color-fg-light);
  --color-input-border: var(--color-gray-200);

  --color-chart-version-active: var(--color-foreground);
  --color-chart-version-dimmed: var(--color-foreground-secondary);
  --color-chart-active-glow: var(--color-accent-primary);
  --chart-version-dimmed-opacity: 0.58;

  /* Swapped mode colors: light gets the former dark-style scrollbar. */
  --color-scrollbar-thumb: var(--color-gray-300);
  --color-scrollbar-thumb-hover: var(--color-gray-150);

  /* Editor 3D Appearance (Light) — mirrors today's hardcoded renderer values. */
  --editor3d-background: var(--color-editor3d-background-light);
  --editor3d-light-ambient: 0.6;
  --editor3d-light-directional: 0.8;
  --editor3d-light-hemisphere: 0.8;
  --editor3d-hemisphere-sky: var(--color-editor3d-hemisphere-sky-light);
  --editor3d-hemisphere-ground: var(--color-editor3d-hemisphere-ground-light);
  --editor3d-surface-architecture: var(
    --color-editor3d-surface-architecture-light
  );
  --editor3d-floorplan-opacity: 0.8;
}

/* ========== Dark Theme ========== */
[theme="dark"] {
  color-scheme: dark;
  --color-background: var(--color-bg-dark);
  --color-background-panel: var(--color-bg-dark);
  --color-background-secondary: var(--color-bg-secondary-dark);
  --color-background-tertiary: var(--color-bg-tertiary-dark);
  --color-background-hover: var(--color-bg-hover-dark);

  --color-foreground: var(--color-fg-dark);
  --color-foreground-secondary: var(--color-fg-secondary-dark);
  --color-foreground-muted: var(--color-fg-muted-dark);
  --color-foreground-tertiary: var(--color-fg-tertiary-dark);

  --color-border: var(--color-bg-tertiary-dark);
  --color-border-subtle: var(--color-bg-secondary-dark);
  --color-border-strong: var(--color-gray-150);

  --color-cell-highlight: var(--color-olive-700);

  /* Luminous Bar (Dark Mode) */
  --color-cell-bar-base: var(--color-brand-yellow-alpha-50);
  --color-cell-bar-bright: var(--color-brand-yellow-alpha-85);
  --color-cell-bar-highlight: var(--color-white-alpha-20);
  --color-cell-glow: var(--color-brand-yellow-alpha-60);
  /* Tag Bar (Dark Mode) */
  --color-tag-bar-base: var(--color-gray-rgb-100-alpha-50);
  --color-tag-bar-bright: var(--color-gray-rgb-160-alpha-70);
  --color-tag-bar-highlight: var(--color-white-alpha-10);
  --color-tag-bar-glow: var(--color-gray-rgb-180-alpha-25);

  --color-accent-secondary: var(--color-olive-800);
  --color-accent-tertiary: var(--color-olive-900);
  --color-separator: var(--color-olive-800);

  --color-row-hover-overlay: var(--color-white-alpha-08);

  --color-input-background: var(--color-fg-tertiary-dark);
  --color-input-foreground: var(--color-white);
  --color-input-border: var(--color-gray-550);

  --color-chart-version-active: var(--color-foreground);
  --color-chart-version-dimmed: var(--color-foreground-secondary);
  --color-chart-active-glow: var(--color-accent-primary);
  --chart-version-dimmed-opacity: 0.58;

  /* Swapped mode colors: dark gets the former light-style scrollbar. */
  --color-scrollbar-thumb: var(--color-gray-600);
  --color-scrollbar-thumb-hover: var(--color-gray-500);

  --shadow-header: var(--shadow-header-dark);

  /* Editor 3D Appearance (Dark) — darker stage, lights raised to compensate. */
  --editor3d-background: var(--color-editor3d-background-dark);
  --editor3d-light-ambient: 0.7;
  --editor3d-light-directional: 0.9;
  --editor3d-light-hemisphere: 0.9;
  --editor3d-hemisphere-sky: var(--color-editor3d-hemisphere-sky-dark);
  --editor3d-hemisphere-ground: var(--color-editor3d-hemisphere-ground-dark);
  --editor3d-surface-architecture: var(
    --color-editor3d-surface-architecture-dark
  );
  --editor3d-floorplan-opacity: 0.8;
}

/* ========== Base Element Styles ========== */
html,
body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* ========== Scrollbar Styles ========== */

/* Standard scrollbar (Firefox, Chrome 121+) — scoped to non-Safari.
   Safari gets separate ::-webkit-scrollbar rules below. */
:root:not(.is-safari) * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

/* Safari: Force zero-width scrollbar to eliminate native gutter.
   No scrollbar-width/scrollbar-color applied (scoped out above). */
:root.is-safari ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

/* Chrome custom scrollbar */
:root:not(.is-safari) ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

:root:not(.is-safari) ::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--rounded);
}

:root:not(.is-safari) ::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--rounded);
  border: 2px solid transparent;
}

:root:not(.is-safari) ::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

:root:not(.is-safari) ::-webkit-scrollbar-corner {
  background: transparent;
}