/*
 * Theme „Aurora“: die gesamte Optik des Admin als Tokens. style.css liest nur diese Werte.
 * Neues Theme: Datei kopieren, Werte ändern, den Link in index.html tauschen. Die Namen
 * stimmen mit dem Aurora-Theme der Wissensplattform überein, Werte lassen sich also übertragen.
 * light-dark(): erster Wert hell, zweiter dunkel. Der Modus folgt dem System.
 */
:root {
  color-scheme: light dark;

  /* Flächen */
  --color-canvas: light-dark(oklch(0.985 0.004 275), oklch(0.17 0.014 275));
  --color-sidebar: light-dark(oklch(0.955 0.01 275), oklch(0.125 0.012 275));
  --color-surface: light-dark(oklch(1 0 0), oklch(0.205 0.016 275));
  --color-raised: light-dark(oklch(1 0 0 / 88%), oklch(0.235 0.018 275 / 88%));
  --color-hover: light-dark(
    oklch(0.45 0.03 275 / 7%),
    oklch(0.92 0.02 275 / 7%)
  );
  --color-overlay: light-dark(
    oklch(0.25 0.03 275 / 35%),
    oklch(0.05 0.01 275 / 65%)
  );
  --color-selected: light-dark(
    oklch(0.6 0.14 275 / 13%),
    oklch(0.72 0.13 275 / 15%)
  );

  /* Text */
  --color-text: light-dark(oklch(0.22 0.02 275), oklch(0.95 0.006 275));
  --color-muted: light-dark(oklch(0.46 0.02 275), oklch(0.75 0.015 275));
  --color-faint: light-dark(oklch(0.52 0.015 275), oklch(0.64 0.015 275));

  /* Linien */
  --color-line: light-dark(
    oklch(0.45 0.03 275 / 13%),
    oklch(0.92 0.02 275 / 10%)
  );
  --color-line-strong: light-dark(
    oklch(0.45 0.03 275 / 24%),
    oklch(0.92 0.02 275 / 20%)
  );

  /* Signalfarben */
  --color-accent: light-dark(oklch(0.5 0.2 268), oklch(0.77 0.12 268));
  --color-accent-soft: light-dark(
    oklch(0.6 0.16 275 / 14%),
    oklch(0.72 0.14 275 / 20%)
  );
  --color-on-accent: oklch(0.99 0 0);
  /* Logos sind meist für hellen Grund gemacht, darum hell auch im dunklen Modus. */
  --color-logo-flaeche: oklch(0.99 0 0);
  --color-danger: light-dark(oklch(0.52 0.2 25), oklch(0.74 0.15 22));
  --color-danger-soft: light-dark(
    oklch(0.6 0.2 25 / 11%),
    oklch(0.7 0.16 22 / 16%)
  );
  --color-success: light-dark(oklch(0.48 0.12 160), oklch(0.8 0.13 160));
  --color-success-soft: light-dark(
    oklch(0.6 0.13 160 / 13%),
    oklch(0.75 0.13 160 / 16%)
  );
  --color-warning: light-dark(oklch(0.5 0.12 70), oklch(0.84 0.13 80));
  --color-warning-soft: light-dark(
    oklch(0.75 0.14 75 / 18%),
    oklch(0.8 0.14 80 / 16%)
  );

  /* Zustände des Agents */
  --color-thinking: light-dark(oklch(0.52 0.21 300), oklch(0.78 0.14 300));
  --color-writing: var(--color-accent);
  --color-working: var(--color-warning);

  /* Diagramme: geprüfte Palette, je Modus eigene Stufen */
  --color-series-0: light-dark(#2a78d6, #3987e5);
  --color-series-1: light-dark(#eb6834, #d95926);
  --color-series-track: light-dark(
    oklch(0.93 0.008 275),
    oklch(0.28 0.016 275)
  );

  /* Verläufe */
  --gradient-brand: linear-gradient(
    115deg,
    oklch(0.54 0.2 262),
    oklch(0.51 0.22 300) 55%,
    oklch(0.58 0.2 355)
  );
  --gradient-text: linear-gradient(
    100deg,
    light-dark(oklch(0.5 0.21 262), oklch(0.77 0.13 262)),
    light-dark(oklch(0.5 0.22 300), oklch(0.74 0.15 305)) 55%,
    light-dark(oklch(0.56 0.21 355), oklch(0.78 0.14 355))
  );
  --gradient-progress: linear-gradient(
    90deg,
    oklch(0.62 0.17 200),
    oklch(0.6 0.2 268) 60%,
    oklch(0.6 0.22 310)
  );
  --gradient-ring: conic-gradient(
    from 0deg,
    oklch(0.62 0.2 262),
    oklch(0.6 0.22 310),
    oklch(0.66 0.2 355),
    oklch(0.62 0.2 262)
  );
  --backdrop:
    radial-gradient(
      56rem 26rem at 88% -12%,
      light-dark(oklch(0.72 0.14 262 / 16%), oklch(0.6 0.19 262 / 24%)),
      transparent 70%
    ),
    radial-gradient(
      38rem 22rem at 28% -18%,
      light-dark(oklch(0.72 0.16 325 / 12%), oklch(0.58 0.2 320 / 17%)),
      transparent 70%
    );
  --backdrop-strong:
    radial-gradient(
      52rem 34rem at 78% 8%,
      oklch(0.62 0.2 262 / 30%),
      transparent 68%
    ),
    radial-gradient(
      44rem 30rem at 18% 88%,
      oklch(0.62 0.21 340 / 22%),
      transparent 68%
    );

  /* Avatare und Kacheln: Farbton kommt pro Name, Helligkeit und Sättigung von hier */
  --avatar-lightness: 0.6;
  --avatar-chroma: 0.16;
  --avatar-hue-shift: 50;

  /* Form */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;
  --border-width: 1px;

  /* Tiefe */
  --shadow-sm: 0 1px 2px oklch(0.2 0.04 275 / 8%);
  --shadow-md: 0 4px 20px -6px oklch(0.2 0.05 275 / 16%);
  --shadow-lg: 0 18px 48px -14px oklch(0.15 0.06 275 / 38%);
  --shadow-xl: 0 28px 80px -20px oklch(0.12 0.06 275 / 55%);
  --shadow-glow: 0 6px 22px -8px oklch(0.55 0.22 285 / 65%);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);
  --glass-blur: 18px;

  /* Schrift. Eigene Webfonts erlaubt die CSP nicht, darum gute Systemschriften. */
  --font-sans:
    "Geist", "Inter", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif,
    system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 650;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --leading: 1.5;
  --leading-tight: 1.2;

  /* Abstände */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Maße und Dichte */
  --size-icon: 1rem;
  --size-icon-sm: 0.875rem;
  --size-sidebar: 16rem;
  --size-topbar: 3.25rem;
  --size-control: 2.125rem;
  --size-control-sm: 1.75rem;
  --size-avatar: 2rem;
  --size-avatar-lg: 2.75rem;
  --size-row: 2.75rem;
  --size-content: 72rem;
  --size-wide: 96rem;
  --size-narrow: 46rem;
  --size-drawer: 34rem;
  --size-palette: 40rem;
  --size-chat-width: 26rem;
  --size-chat-height: 38rem;
  --size-bubble: 3.5rem;
  --size-thumb: 11rem;

  /* Bewegung */
  --duration-fast: 130ms;
  --duration-medium: 260ms;
  --duration-slow: 1.6s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}