/* ============================================================================
 * Clear Mind Solutions — Design Tokens für Adoria-Dashboard
 * ============================================================================
 * Drop-in CSS — kein Build, kein Tailwind-Runtime.
 * Quelle: cms-website/app/globals.css (Stand: 2026-05-03)
 *
 * Diese Datei enthält:
 *   1. Brand-Farben (oklch, mit Hex-Kommentar)
 *   2. Radii / Shadows / Type / Container-Widths
 *   3. Motion-Tokens (Durations + Easings) als CSS-Vars
 *   4. Utility-Klassen für Motion (.duration-*, .ease-*)
 *   5. Reveal-System (.cms-reveal, .cms-stagger, .cms-delay-*)
 *   6. Brand-Effekte (.text-gradient, .bg-grid-navy, .bg-radial-glow)
 *   7. Global Reset + prefers-reduced-motion
 *
 * Update-Workflow: bei Token-Änderung im cms-website Repo
 * → Datei neu generieren → per scp ins Adoria-Repo droppen → caddy reload.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. Tokens — als CSS-Variablen auf :root
 * --------------------------------------------------------------------------*/

:root {
  color-scheme: light;

  /* Brand-Palette (oklch + Hex-Reference) */
  --background:     oklch(0.984 0.012 220);  /* #F2F9FC ice blue */
  --foreground:     oklch(0.18 0.04 250);    /* navy text */
  --surface:        oklch(1 0 0);            /* #FFFFFF */
  --surface-muted:  oklch(0.965 0.018 220);  /* #EBF6FB */
  --brand:          oklch(0.78 0.14 220);    /* #00B8E6 cyan */
  --brand-hover:    oklch(0.68 0.13 222);    /* #0099CC */
  --brand-soft:     oklch(0.88 0.10 215);    /* #80E6FF */
  --brand-tint:     oklch(0.96 0.04 215);    /* #E0FAFF */
  --navy:           oklch(0.20 0.045 255);   /* #0A192F */
  --navy-muted:     oklch(0.27 0.05 255);    /* #1A3050 */
  --navy-deep:      oklch(0.17 0.04 255);    /* #0D1E2E */
  --text:           oklch(0.20 0.045 255);   /* same as navy */
  --text-muted:     oklch(0.46 0.04 250);    /* #3B5C7A */
  --text-on-dark:   oklch(0.92 0.02 220);    /* #D8EDF5 */
  --border:         oklch(0.20 0.045 255 / 0.10);
  --border-strong:  oklch(0.20 0.045 255 / 0.18);

  /* Radii */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-card:  14px;
  --radius-pill:  9999px;
  --radius-btn:   20px;
  --radius-input: 10px;

  /* Shadows */
  --shadow-soft:        0 1px 2px rgba(10, 25, 47, 0.04), 0 8px 24px -12px rgba(10, 25, 47, 0.10);
  --shadow-card:        0 1px 0 rgba(10, 25, 47, 0.04), 0 12px 32px -16px rgba(10, 25, 47, 0.12);
  --shadow-glow:        0 0 0 1px rgba(0, 184, 230, 0.18), 0 18px 60px -16px rgba(0, 184, 230, 0.45);
  --shadow-focus-ring:  0 0 0 3px rgba(0, 184, 230, 0.18);

  /* Type */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Container-Widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  /* Motion — Durations */
  --duration-fast:  120ms;
  --duration-quick: 180ms;
  --duration-base:  220ms;
  --duration-slow:  480ms;
  --duration-xslow: 700ms;

  /* Motion — Easings */
  --ease-corporate:  cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------------------------
 * 2. Base — Reset + Typography + Focus
 * --------------------------------------------------------------------------*/

*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 96px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

::selection {
  background-color: color-mix(in oklch, var(--brand) 35%, transparent);
  color: var(--navy);
}

*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced-Motion (MUSS gewinnen, !important nicht entfernen) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
 * 3. Color Utilities (semantic)
 *    — nur die im CMS-Kanon erlaubten Klassen.
 *      Keine Tailwind-Color-Scale (kein bg-blue-500). Nur Brand-Token.
 * --------------------------------------------------------------------------*/

.bg-background      { background-color: var(--background); }
.bg-surface         { background-color: var(--surface); }
.bg-surface-muted   { background-color: var(--surface-muted); }
.bg-brand           { background-color: var(--brand); }
.bg-brand-hover     { background-color: var(--brand-hover); }
.bg-brand-soft      { background-color: var(--brand-soft); }
.bg-brand-tint      { background-color: var(--brand-tint); }
.bg-navy            { background-color: var(--navy); }
.bg-navy-muted      { background-color: var(--navy-muted); }
.bg-navy-deep       { background-color: var(--navy-deep); }

.text-foreground    { color: var(--foreground); }
.text-text          { color: var(--text); }
.text-text-muted    { color: var(--text-muted); }
.text-text-on-dark  { color: var(--text-on-dark); }
.text-brand         { color: var(--brand); }
.text-brand-hover   { color: var(--brand-hover); }
.text-brand-soft    { color: var(--brand-soft); }
.text-navy          { color: var(--navy); }

.border-border        { border-color: var(--border); }
.border-border-strong { border-color: var(--border-strong); }
.border-brand         { border-color: var(--brand); }

/* ----------------------------------------------------------------------------
 * 4. Radii / Shadows / Container
 * --------------------------------------------------------------------------*/

.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-2xl   { border-radius: var(--radius-2xl); }
.rounded-card  { border-radius: var(--radius-card); }
.rounded-pill  { border-radius: var(--radius-pill); }
.rounded-btn   { border-radius: var(--radius-btn); }
.rounded-input { border-radius: var(--radius-input); }

.shadow-soft       { box-shadow: var(--shadow-soft); }
.shadow-card       { box-shadow: var(--shadow-card); }
.shadow-glow       { box-shadow: var(--shadow-glow); }
.shadow-focus-ring { box-shadow: var(--shadow-focus-ring); }

.max-w-container-sm  { max-width: var(--container-sm); }
.max-w-container-md  { max-width: var(--container-md); }
.max-w-container-lg  { max-width: var(--container-lg); }
.max-w-container-xl  { max-width: var(--container-xl); }
.max-w-container-2xl { max-width: var(--container-2xl); }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ----------------------------------------------------------------------------
 * 5. Motion-Utilities — gleiche Tokens für transition + animation
 * --------------------------------------------------------------------------*/

.duration-fast   { transition-duration: var(--duration-fast);   animation-duration: var(--duration-fast); }
.duration-quick  { transition-duration: var(--duration-quick);  animation-duration: var(--duration-quick); }
.duration-base   { transition-duration: var(--duration-base);   animation-duration: var(--duration-base); }
.duration-slow   { transition-duration: var(--duration-slow);   animation-duration: var(--duration-slow); }
.duration-xslow  { transition-duration: var(--duration-xslow);  animation-duration: var(--duration-xslow); }

.ease-corporate  { transition-timing-function: var(--ease-corporate);  animation-timing-function: var(--ease-corporate); }
.ease-smooth     { transition-timing-function: var(--ease-smooth);     animation-timing-function: var(--ease-smooth); }
.ease-spring     { transition-timing-function: var(--ease-spring);     animation-timing-function: var(--ease-spring); }
.ease-decelerate { transition-timing-function: var(--ease-decelerate); animation-timing-function: var(--ease-decelerate); }

.transition-colors    { transition-property: color, background-color, border-color, fill, stroke; }
.transition-transform { transition-property: transform; }
.transition-opacity   { transition-property: opacity; }
.transition-all       { transition-property: all; }

/* ----------------------------------------------------------------------------
 * 6. Brand Visual Effects
 * --------------------------------------------------------------------------*/

.text-gradient {
  background: linear-gradient(
    90deg,
    #009EB8 0%,
    #40DCFF 35%,
    #A8F4FF 50%,
    #40DCFF 65%,
    #009EB8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bg-grid-navy {
  background-image:
    linear-gradient(to right,  rgba(216, 237, 245, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(216, 237, 245, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.bg-radial-glow {
  background:
    radial-gradient(800px 400px at 80% 0%,   rgba(0, 184, 230, 0.22), transparent 60%),
    radial-gradient(600px 300px at 10% 100%, rgba(0, 184, 230, 0.10), transparent 60%);
}

/* ----------------------------------------------------------------------------
 * 7. Reveal-System (paired mit cms-reveal.js)
 *    JS togglet `.is-in-view`, Animation läuft nur in CSS.
 * --------------------------------------------------------------------------*/

@keyframes cms-reveal-kf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cms-reveal,
.cms-reveal-soft       { opacity: 0; transform: translateY(8px); will-change: opacity, transform; }
.cms-stagger > *       { opacity: 0; transform: translateY(8px); will-change: opacity, transform; }

.cms-reveal.is-in-view      { animation: cms-reveal-kf 480ms cubic-bezier(0.2, 0, 0, 1) both; }
.cms-reveal-soft.is-in-view { animation: cms-reveal-kf 700ms cubic-bezier(0.2, 0, 0, 1) both; }

.cms-stagger.is-in-view > *               { animation: cms-reveal-kf 480ms cubic-bezier(0.2, 0, 0, 1) both; }
.cms-stagger.is-in-view > *:nth-child(1)  { animation-delay: 0ms; }
.cms-stagger.is-in-view > *:nth-child(2)  { animation-delay: 80ms; }
.cms-stagger.is-in-view > *:nth-child(3)  { animation-delay: 160ms; }
.cms-stagger.is-in-view > *:nth-child(4)  { animation-delay: 240ms; }
.cms-stagger.is-in-view > *:nth-child(5)  { animation-delay: 320ms; }
.cms-stagger.is-in-view > *:nth-child(6)  { animation-delay: 400ms; }
.cms-stagger.is-in-view > *:nth-child(n+7) { animation-delay: 480ms; }

.cms-delay-1 { animation-delay: 80ms; }
.cms-delay-2 { animation-delay: 160ms; }
.cms-delay-3 { animation-delay: 240ms; }
.cms-delay-4 { animation-delay: 320ms; }
.cms-delay-5 { animation-delay: 400ms; }
.cms-delay-6 { animation-delay: 480ms; }

/* ----------------------------------------------------------------------------
 * 8. Orbit-Glow Animations (optional — für dekorative Visual-Akzente)
 * --------------------------------------------------------------------------*/

@keyframes orbit-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
.animate-orbit-pulse { animation: orbit-pulse 6s  ease-in-out infinite; }
.animate-orbit-spin  { animation: orbit-spin  28s linear      infinite; }