/* ===== CAMEL CLOUD - DESIGN TOKENS ===== */
/* Angelehnt an Cargo Manager Inside (Figma) */
/* Aenderungen hier wirken sich auf ALLE Backend-Seiten aus */
/* Dies ist die EINZIGE Datei die fuer Design-Anpassungen bearbeitet werden muss */

:root {
  /* ── Primary (identisch mit Cargo Manager Inside) ── */
  --cc-primary: #030213;
  --cc-primary-fg: #ffffff;
  --cc-primary-light: #1a1a2e;
  --cc-primary-dark: #010110;
  --cc-primary-muted: #e9ebef;

  /* ── Legacy-Aliases (für var(--color-primary) in älteren Views) ── */
  --color-primary: var(--cc-primary);
  --color-success: var(--cc-success);
  --color-warning: var(--cc-warning);
  --color-danger: var(--cc-destructive);

  /* ── Background & Foreground ── */
  --cc-background: #ffffff;
  --cc-foreground: #1b1b1b;

  /* ── Card ── */
  --cc-card: #ffffff;
  --cc-card-fg: #1b1b1b;

  /* ── Secondary ── */
  --cc-secondary: #f0f0f4;
  --cc-secondary-fg: #030213;

  /* ── Muted ── */
  --cc-muted: #ececf0;
  --cc-muted-fg: #717182;

  /* ── Accent ── */
  --cc-accent: #e9ebef;
  --cc-accent-fg: #030213;

  /* ── Destructive ── */
  --cc-destructive: #d4183d;
  --cc-destructive-fg: #ffffff;

  /* ── Status Colors ── */
  --cc-success: #16a34a;
  --cc-success-bg: #f0fdf4;
  --cc-warning: #ca8a04;
  --cc-warning-bg: #fefce8;
  --cc-info: #030213;
  --cc-info-bg: #f3f3f5;
  --cc-destructive-bg: #fef2f2;

  /* ── Border & Input ── */
  --cc-border: rgba(0, 0, 0, 0.1);
  --cc-input-bg: #f3f3f5;
  --cc-input-border: #d1d5db;
  --cc-ring: rgba(3, 2, 19, 0.15);

  /* ── Radius ── */
  --cc-radius: 0.625rem;
  --cc-radius-sm: 6px;
  --cc-radius-md: 8px;
  --cc-radius-lg: 10px;
  --cc-radius-xl: 14px;

  /* ── Shadows ── */
  --cc-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cc-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --cc-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* ── Sidebar ── */
  --cc-sidebar-bg: #fafafa;
  --cc-sidebar-fg: #1b1b1b;
  --cc-sidebar-border: #e5e5e5;
  --cc-sidebar-active: #fff7ed;
  --cc-sidebar-active-fg: #ea580c;
  --cc-sidebar-hover: #f5f5f7;
  --cc-sidebar-width: 256px;
  --cc-sidebar-item-py: 0.75rem;
  --cc-sidebar-item-px: 1rem;

  /* ── Modal ── */
  --cc-modal-header-bg: var(--cc-primary);
  --cc-modal-header-fg: #ffffff;

  /* ── Header ── */
  --cc-header-height: 56px;
  --cc-header-bg: #ffffff;
  --cc-header-border: rgba(0, 0, 0, 0.1);
  --cc-header-padding: 0 2rem;
  --cc-header-logo-height: 40px;
  --cc-header-icon-color: #111827;

  /* ── Font ── */
  --cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
  --cc-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --cc-root-font-size: 14px;  /* ← HIER ändern um ALLES zu skalieren */
  --cc-font-size-xs: 10px;
  --cc-font-size-sm: 11px;
  --cc-font-size-base: 12px;
  --cc-font-size-lg: 13px;
  --cc-font-size-xl: 14px;
  --cc-font-size-2xl: 16px;

  /* ── Content & Page Layout ── */
  --cc-content-max-width: 1600px;  /* Max-Breite fuer bessere Lesbarkeit auf grossen Monitoren */
  --cc-page-padding: 1.5rem;      /* Innenabstand des Hauptbereichs vom Rand */
  --cc-page-gap: 1.25rem;         /* Abstand zwischen Cards/Blöcken */
  --cc-page-header-mb: 1.25rem;   /* Abstand unter dem Seiten-Titel */
  --cc-card-padding: 1.25rem;     /* Innenabstand in Cards */

  /* ── Spacing Scale (Bootstrap-kompatibel) ── */
  --cc-spacer-0: 0;
  --cc-spacer-1: 0.25rem;
  --cc-spacer-2: 0.5rem;
  --cc-spacer-3: 1rem;
  --cc-spacer-4: 1.5rem;
  --cc-spacer-5: 3rem;

  /* ── Grid ── */
  --cc-gutter-x: 1.5rem;
  --cc-gutter-y: 0;

  /* ── Transition ── */
  --cc-transition-speed: 0.15s;
  --cc-transition: all var(--cc-transition-speed) ease;
}