/* ==========================================================================
   Argo Design Tokens — tasker.de
   Alle Farben, Typo, Spacing werden als CSS-Variablen angesprochen.
   ========================================================================== */

:root {
  /* Basis-Farben */
  --argo-bg-base: #0b0f14;
  --argo-bg-surface: #121821;
  --argo-bg-elevated: #1a222d;
  --argo-bg-inset: #070a0e;

  /* Text */
  --argo-text-primary: #e8e4d9;
  --argo-text-secondary: #a8a196;
  --argo-text-tertiary: #6e6a60;
  --argo-text-inverse: #0b0f14;

  /* Akzent (Bernstein/Kupfer) */
  --argo-accent: #d4974a;
  --argo-accent-hover: #e8a557;
  --argo-accent-muted: rgba(212, 151, 74, 0.15);
  --argo-accent-glow: rgba(212, 151, 74, 0.35);

  /* Sekundär (Teal) */
  --argo-secondary: #4ea89e;
  --argo-secondary-muted: rgba(78, 168, 158, 0.15);

  /* Semantic */
  --argo-success: #6fb87a;
  --argo-warning: #e8b84a;
  --argo-danger: #d4674a;
  --argo-info: #4a9ad4;

  /* Borders */
  --argo-border-subtle: rgba(232, 228, 217, 0.06);
  --argo-border-default: rgba(232, 228, 217, 0.12);
  --argo-border-strong: rgba(232, 228, 217, 0.24);
  --argo-border-accent: rgba(212, 151, 74, 0.4);

  /* Typografie */
  --argo-font-display: "Fraunces", "Crimson Pro", Georgia, serif;
  --argo-font-body: "Cabinet Grotesk", "Satoshi", "Inter", system-ui, sans-serif;
  --argo-font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace;

  --argo-text-xs: 0.75rem;
  --argo-text-sm: 0.875rem;
  --argo-text-base: 1rem;
  --argo-text-lg: 1.125rem;
  --argo-text-xl: 1.375rem;
  --argo-text-2xl: 1.75rem;
  --argo-text-3xl: 2.5rem;

  --argo-weight-normal: 400;
  --argo-weight-medium: 500;
  --argo-weight-display: 600;

  /* Spacing (8px-Basis) */
  --argo-space-1: 0.25rem;
  --argo-space-2: 0.5rem;
  --argo-space-3: 0.75rem;
  --argo-space-4: 1rem;
  --argo-space-5: 1.5rem;
  --argo-space-6: 2rem;
  --argo-space-7: 3rem;
  --argo-space-8: 4rem;

  /* Radii */
  --argo-radius-sm: 4px;
  --argo-radius-md: 8px;
  --argo-radius-lg: 12px;
  --argo-radius-xl: 16px;
  --argo-radius-full: 9999px;

  /* Shadows */
  --argo-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --argo-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --argo-shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --argo-shadow-glow: 0 0 24px var(--argo-accent-glow);

  /* Motion */
  --argo-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --argo-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --argo-duration-fast: 120ms;
  --argo-duration-base: 200ms;
  --argo-duration-slow: 320ms;

  /* Layout */
  --argo-max-content: 1440px;
  --argo-sidebar-width: 240px;
  --argo-sidebar-collapsed: 64px;
  --argo-header-height: 64px;

  /* z-index scale */
  --argo-z-sidebar: 40;
  --argo-z-topbar:  45;
  --argo-z-dock:    60;
  --argo-z-menu:    70;
  --argo-z-toast:   90;
}

[data-theme="light"] {
  --argo-bg-base: #f7f4ed;
  --argo-bg-surface: #ffffff;
  --argo-bg-elevated: #faf7f0;
  --argo-bg-inset: #efeae0;
  --argo-text-primary: #1a1814;
  --argo-text-secondary: #4a4641;
  --argo-text-tertiary: #8a847b;
  --argo-text-inverse: #ffffff;
  --argo-border-subtle: rgba(26, 24, 20, 0.06);
  --argo-border-default: rgba(26, 24, 20, 0.12);
  --argo-border-strong: rgba(26, 24, 20, 0.24);

  --argo-shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.08);
  --argo-shadow-md: 0 4px 16px rgba(26, 24, 20, 0.10);
  --argo-shadow-lg: 0 14px 36px rgba(26, 24, 20, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}