/* =========================================================
   NEYERSIN DESIGN TOKENS v1.0
   Source of Truth for all dashboard (React) styling.
   Mirrors web/static/neyersin-tokens.css (SSR) and
   docs/design/prototypes/tokens.css (prototypes).

   Consumed by:
   - primereact-override.css (maps to PrimeReact vars)
   - index.css (@theme inline mapping for Tailwind v4)
   - Any component that needs raw CSS vars (var(--color-primary))

   Treat this file as read-only from components. Update here,
   then verify SSR mirror.
========================================================= */

:root {
  /* ========== Colors — Core ========== */
  --color-primary: #00D2BE;
  --color-primary-deep: #00B8A6;
  --color-primary-darker: #008F80;
  --color-accent: #C9A227;
  --color-accent-soft: #E5BC3D;

  --color-ink: #0A0A0A;
  --color-ink-soft: #1D1D1F;
  --color-muted: #6E6E73;
  --color-muted-2: #86868B;
  --color-bg: #FAFAFA;
  --color-card: #FFFFFF;
  --color-line: #E8E8ED;
  --color-surface-soft: #F5F5F7;

  /* ========== Colors — Semantic ========== */
  --color-success: #0EB981;
  --color-success-soft: #E7F7EF;
  --color-warning: #F5A623;
  --color-warning-soft: #FFF4E0;
  --color-danger: #E5484D;
  --color-danger-soft: #FEEAEB;
  --color-info: #3B82F6;
  --color-info-soft: #EBF3FF;

  /* ========== Typography ========== */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-display: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type Scale (Major Third 1.25) */
  --text-display-2xl: 80px;
  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-h5: 16px;
  --text-h6: 14px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-micro: 10px;
  --text-button: 14px;
  --text-label: 13px;

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ========== Spacing (4px-basiert) ========== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========== Radii ========== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ========== Shadows ========== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-focus: 0 0 0 3px rgba(0, 210, 190, 0.25);
  --shadow-glow-primary: 0 0 0 6px rgba(0, 210, 190, 0.12);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);

  /* ========== Motion ========== */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* ========== Layout ========== */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded: 256px;
  --header-height: 56px;
  --detail-panel-width: 400px;

  /* ========== Icons ========== */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 32px;
}

/* ========== Dark Mode Tokens ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0A0A0A;
    --color-card: #1C1C1E;
    --color-ink: #F5F5F7;
    --color-ink-soft: #E5E5EA;
    --color-muted: #8E8E93;
    --color-muted-2: #6E6E73;
    --color-line: #2C2C2E;
    --color-surface-soft: #1C1C1E;

    /* Shadows auf Dark leicht kraeftiger */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.7);
  }
}