/* ============================================================================
   ScreenRec Design-Tokens
   ----------------------------------------------------------------------------
   Das ist die einzige Datei mit konkreten Farben, Größen und Effektwerten.
   Kein Hex- und kein Pixelwert gehört in eine Komponentendatei.

   Die Palette orientiert sich an Loom nach der Atlassian-Übernahme:
   Cobalt als funktionale Primärfarbe, Lila und Orange ausschließlich
   als dekorative Verläufe, nie für Bedienelemente.

   Ändern ist ungefährlich: die Komponenten lesen nur var(--...) und kennen
   keinen der Werte hier.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- Marke */
  --brand-500: #1868db;   /* Primärfarbe, Buttons, aktive Zustände */
  --brand-400: #4d8ced;
  --brand-300: #8fb8f6;
  --brand-600: #1257bb;
  --brand-700: #0e4593;

  /* Nur Dekoration: Verläufe, leere Zustände. Nie für Bedienelemente. */
  --deco-purple: #bf63f3;
  --deco-aubergine: #48245d;
  --deco-amber: #f5a623;

  /* ---------------------------------------------------------------- Neutral */
  --ink-900: #101214;     /* Überschriften */
  --ink-700: #292a2e;     /* Fließtext */
  --ink-500: #5e6470;     /* Sekundärtext */
  --ink-400: #8b919e;     /* Hinweise, deaktiviert */
  --ink-300: #b6bbc5;

  --surface-0: #ffffff;   /* Karten */
  --surface-1: #f7f8fa;   /* Seitenhintergrund */
  --surface-2: #eef0f4;   /* Hervorhebungen, Hover */
  --surface-3: #e2e5eb;

  --border-soft: #e6e9ef;
  --border-strong: #ccd1da;

  /* ---------------------------------------------------------------- Status */
  --ok-500: #1f9d55;
  --ok-050: #e7f6ed;
  --warn-500: #c77700;
  --warn-050: #fdf3e2;
  --danger-500: #d13438;
  --danger-050: #fdeceb;
  --info-500: var(--brand-500);
  --info-050: #e8f1fe;

  /* ---------------------------------------------------------------- Schrift */
  /* Charlie ist Atlassians Hausschrift und nicht frei lizenziert. Die Kette
     unten trifft auf jedem System die nächstliegende humanistische Sans. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------------------------------------------------------------- Raster */
  --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;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------- Tiefe */
  --shadow-xs: 0 1px 2px rgba(16, 18, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 18, 20, 0.08);
  --shadow-md: 0 6px 18px rgba(16, 18, 20, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 18, 20, 0.14);
  --shadow-focus: 0 0 0 3px rgba(24, 104, 219, 0.28);

  /* ---------------------------------------------------------------- Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------------------------------------------------------------- Ebenen */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-toast: 900;

  /* ---------------------------------------------------------------- Layout */
  --sidebar-width: 248px;
  --topbar-height: 56px;
  --content-max: 1440px;
  --card-min-width: 260px;
}

/* ============================================================================
   Dunkler Modus. Nur Tokens werden neu belegt, keine Regel wird überschrieben.
   Deshalb funktioniert jede Komponente hier automatisch mit.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-500: #4d8ced;
    --brand-400: #6fa4f2;
    --brand-300: #8fb8f6;
    --brand-600: #3577d8;
    --brand-700: #2b63b8;

    --ink-900: #f2f4f8;
    --ink-700: #d8dce4;
    --ink-500: #a0a7b4;
    --ink-400: #767d8c;
    --ink-300: #5a6170;

    --surface-0: #1c1f25;
    --surface-1: #14171c;
    --surface-2: #252932;
    --surface-3: #2f343f;

    --border-soft: #2a2f38;
    --border-strong: #3b414d;

    --ok-050: #12291c;
    --warn-050: #2c2112;
    --danger-050: #2e1616;
    --info-050: #14243c;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(77, 140, 237, 0.4);
  }
}

/* Ausdrückliche Wahl des Nutzers gewinnt in beide Richtungen. */
:root[data-theme="dark"] {
  --brand-500: #4d8ced;
  --brand-400: #6fa4f2;
  --brand-600: #3577d8;
  --ink-900: #f2f4f8;
  --ink-700: #d8dce4;
  --ink-500: #a0a7b4;
  --ink-400: #767d8c;
  --ink-300: #5a6170;
  --surface-0: #1c1f25;
  --surface-1: #14171c;
  --surface-2: #252932;
  --surface-3: #2f343f;
  --border-soft: #2a2f38;
  --border-strong: #3b414d;
  --ok-050: #12291c;
  --warn-050: #2c2112;
  --danger-050: #2e1616;
  --info-050: #14243c;
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(77, 140, 237, 0.4);
}