@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   Toolaro Editorial Token-System
   Eine Akzentfarbe. Warme Neutrale. Gedeckte Kategorie-Tinten.
   ============================================================ */

@layer base {
  :root {
    /* --- Risograph-Druck-Tokens (RGB-Triples für /opacity-Utilities) ---
       Cremepapier · Indigo-Tinte · Koralle-Akzent · Senf · Überdruck-Lila
       Adaptiert von kotsch.tech/de/demo/9 */
    --surface-base: 244 235 217;     /* Cremepapier #F4EBD9 */
    --surface-raised: 250 244 230;   /* helleres Papier (Karten) */
    --surface-sunken: 235 224 202;   /* dunkleres Papier */
    --surface-inverse: 43 58 140;    /* Indigo */

    --ink-primary: 43 58 140;        /* Indigo #2B3A8C */
    --ink-secondary: 74 88 156;
    --ink-tertiary: 110 122 175;
    --ink-disabled: 158 166 198;

    /* Brand – Risograph Koralle→Indigo Duoton */
    --brand-50:  252 234 230;
    --brand-100: 255 214 207;
    --brand-200: 255 179 168;
    --brand-400: 255 110 96;
    --brand-500: 255 75 62;    /* Koralle #FF4B3E */
    --brand-600: 224 58 46;
    --brand-700: 90 46 99;     /* Überdruck-Lila #5A2E63 */
    --brand-900: 43 58 140;    /* Indigo (Text auf hellem Koralle-Grund) */

    /* Gradient-Stops – Koralle → Überdruck → Indigo */
    --grad-from: 255 75 62;    /* Koralle #FF4B3E */
    --grad-via:  90 46 99;     /* Überdruck #5A2E63 */
    --grad-to:   43 58 140;    /* Indigo #2B3A8C */

    /* Kategorie-Tinten – desaturiert, nur für Icon-Chips + Hairlines */
    --cat-generator:  185 108 176;
    --cat-calculator:  58 154 131;
    --cat-converter:  200 144 85;
    --cat-text:        73 136 185;
    --cat-security:   196 111 107;
    --cat-image:      144 120 197;
    --cat-developer:   90 106 158;

    /* --- shadcn-Brücke (HSL für Bestandskompatibilität) --- */
    --background: 43 52% 90%;        /* Cremepapier */
    --foreground: 231 53% 36%;       /* Indigo */

    --card: 43 52% 90%;
    --card-foreground: 231 53% 36%;

    --popover: 43 52% 90%;
    --popover-foreground: 231 53% 36%;

    --primary: 4 100% 62%;           /* Koralle */
    --primary-foreground: 43 52% 94%;

    --secondary: 43 36% 90%;
    --secondary-foreground: 231 53% 36%;

    --muted: 43 36% 90%;
    --muted-foreground: 231 22% 46%;

    --accent: 43 38% 86%;
    --accent-foreground: 231 53% 36%;

    --destructive: 4 90% 58%;
    --destructive-foreground: 43 52% 94%;

    --border: 231 30% 72%;
    --input: 231 30% 72%;
    --ring: 4 100% 62%;

    --radius: 0px;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .dark {
    --surface-base: 16 18 23;
    --surface-raised: 22 25 32;
    --surface-sunken: 12 14 18;
    --surface-inverse: 248 248 246;

    --ink-primary: 242 240 235;
    --ink-secondary: 184 186 192;
    --ink-tertiary: 138 141 148;
    --ink-disabled: 92 95 102;

    --brand-50:  30 48 72;
    --brand-100: 35 60 104;
    --brand-200: 48 96 168;
    --brand-400: 90 180 252;
    --brand-500: 96 165 250;
    --brand-600: 130 180 252;
    --brand-700: 180 200 253;

    --grad-from: 103 232 249;
    --grad-via:  96 165 250;
    --grad-to:   167 139 250;

    --background: 220 14% 8%;
    --foreground: 60 8% 95%;

    --card: 220 12% 12%;
    --card-foreground: 60 8% 95%;

    --popover: 220 12% 12%;
    --popover-foreground: 60 8% 95%;

    --primary: 232 80% 76%;
    --primary-foreground: 220 14% 12%;

    --secondary: 220 10% 18%;
    --secondary-foreground: 60 8% 95%;

    --muted: 220 10% 18%;
    --muted-foreground: 220 6% 64%;

    --accent: 220 10% 18%;
    --accent-foreground: 60 8% 95%;

    --destructive: 0 70% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 8% 22%;
    --input: 220 8% 22%;
    --ring: 232 80% 76%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    background-color: rgb(var(--surface-base));
    color: rgb(var(--ink-primary));
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01";
  }

  /* Headlines erben Display-Font NUR wenn explizit gesetzt – via font-display Utility */
  .font-display {
    font-family: var(--font-display);
    font-feature-settings: "liga", "dlig";
  }
  .font-mono {
    font-feature-settings: "tnum", "ss01";
  }

  /* Tabular nums für alle numerischen Daten */
  .tabular {
    font-variant-numeric: tabular-nums;
  }

  /* Editorial Focus-Ring – konsistent über alles */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--brand-500));
    outline-offset: 2px;
    box-shadow: none;
    border-radius: 0;
  }

  /* Saubere Text-Selektion */
  ::selection {
    background-color: rgb(var(--brand-500) / 0.18);
    color: rgb(var(--ink-primary));
  }

  /* Hairlines – warm grau, kein eiskaltes slate */
  hr {
    border: 0;
    border-top: 1px solid rgb(var(--ink-primary) / 0.08);
  }
}

/* ============================================================
   Brand-Gradient Utilities (Cyan → Blau → Violett)
   ============================================================ */
@layer utilities {
  .text-gradient-brand {
    background-image: linear-gradient(
      110deg,
      rgb(var(--grad-from)),
      rgb(var(--grad-via)) 45%,
      rgb(var(--grad-to))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .bg-gradient-brand {
    background-image: linear-gradient(
      120deg,
      rgb(var(--grad-from)),
      rgb(var(--grad-via)) 48%,
      rgb(var(--grad-to))
    );
  }
  .bg-gradient-brand-soft {
    background-image: linear-gradient(
      120deg,
      rgb(var(--grad-from) / 0.12),
      rgb(var(--grad-via) / 0.12) 50%,
      rgb(var(--grad-to) / 0.12)
    );
  }
  .ring-gradient-brand {
    border: 1px solid transparent;
    background-image:
      linear-gradient(rgb(var(--surface-raised)), rgb(var(--surface-raised))),
      linear-gradient(120deg, rgb(var(--grad-from)), rgb(var(--grad-via)) 50%, rgb(var(--grad-to)));
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  /* Animierter Gradient für Hero-Akzente */
  .text-gradient-brand-animated {
    background-image: linear-gradient(
      110deg,
      rgb(var(--grad-from)),
      rgb(var(--grad-via)) 35%,
      rgb(var(--grad-to)) 65%,
      rgb(var(--grad-via)) 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: brand-shimmer 6s linear infinite;
  }
}

@keyframes brand-shimmer {
  to { background-position: 220% center; }
}

/* ============================================================
   Bestehende Animationen (kotsch-imports nutzen sie)
   ============================================================ */

/* Logo-Mark Pulse */
@keyframes tlr-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.92); opacity: 0.78; }
}

/* Hero floating tiles */
@keyframes tile-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tile-rot, 0deg)); }
  50%      { transform: translate3d(0, -8px, 0) rotate(var(--tile-rot, 0deg)); }
}

/* Aurora blob drift */
@keyframes aurora-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(4%, -3%, 0) scale(1.08); }
  66%      { transform: translate3d(-3%, 4%, 0) scale(0.95); }
}

/* Marquee endless scroll */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-x-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes toolaro-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  50%      { transform: translate(-50%, -56%) rotate(3deg) scale(1.04); }
}
@keyframes toolaro-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes toolaro-pulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.86; }
  50%      { transform: translateY(-14px) scale(1.06); opacity: 1; }
}
.toolaro-float { animation: toolaro-float 5.5s ease-in-out infinite; }
.toolaro-orbit { animation: toolaro-orbit 18s linear infinite; }
.toolaro-orbit::before, .toolaro-orbit::after {
  content: ""; position: absolute; border-radius: 9999px;
  background: rgb(var(--brand-400));
  box-shadow: 0 0 18px rgb(var(--brand-400) / 0.45);
}
.toolaro-orbit::before { width: 12px; height: 12px; left: 18%; top: 6%; }
.toolaro-orbit::after  { width: 8px; height: 8px; bottom: 11%; right: 19%;
  background: rgb(var(--brand-200));
  box-shadow: 0 0 16px rgb(var(--brand-200) / 0.4);
}
.toolaro-orbit-slow { animation-duration: 27s; animation-direction: reverse; }
.toolaro-pulse { animation: toolaro-pulse 4.2s ease-in-out infinite; }
.toolaro-pulse-delay { animation-delay: 1.3s; }

@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;
  }
}

/* ============================================================
   Kotsch Quick-Result Container (refresh auf neue Tokens)
   ============================================================ */
.kotsch-quick-result {
  display: grid;
  gap: 14px;
}
.kotsch-quick-result .metric {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid rgb(var(--ink-primary));
  background: rgb(var(--surface-raised));
  border-radius: 0;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: rgb(var(--ink-secondary));
}
.kotsch-quick-result .metric span {
  font-weight: 500;
  color: rgb(var(--ink-secondary));
}
.kotsch-quick-result .metric strong {
  text-align: right;
  font-weight: 600;
  color: rgb(var(--brand-600));
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kotsch-quick-result .result {
  border: 2px solid rgb(var(--ink-primary));
  background: rgb(var(--brand-50));
  border-radius: 0;
  box-shadow: 5px 5px 0 rgb(var(--brand-500));
  padding: 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(var(--brand-900));
  white-space: pre-wrap;
  word-break: break-word;
}
.kotsch-quick-result .result.mono,
.kotsch-quick-result .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kotsch-quick-result .copy-box {
  max-height: 22rem;
  overflow: auto;
}