@import 'tailwindcss';

/*
 * perinco CRM - Corporate Identity
 * Farben direkt aus dem perinco Logo gesampelt:
 *   Gruen  #6BA04A (Akzent #68A33F)
 *   Grau   #6E6E6E
 * Schrift: perinco.de nutzt Avenir LT (Light 35 / Heavy 85). Ist Avenir lokal
 * installiert, wird es verwendet, sonst Nunito Sans als freies Aequivalent.
 */

@theme {
  --font-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;

  /*
   * Flaechen sind bewusst semantisch benannt statt "weiss": im Dark Mode werden
   * unten nur diese Variablen umgesetzt, die Utility-Klassen in den Komponenten
   * bleiben unveraendert.
   *   canvas  = Seitenhintergrund
   *   surface = Karten, Leisten, Dialoge
   */
  --color-canvas: #f7f7f7;
  --color-surface: #ffffff;

  --color-brand-50: #f2f8ee;
  --color-brand-100: #e2efd9;
  --color-brand-200: #c6e0b6;
  --color-brand-300: #a3cd8a;
  --color-brand-400: #85ba66;
  --color-brand-500: #6ba04a;
  --color-brand-600: #58873b;
  --color-brand-700: #456a2f;
  --color-brand-800: #375427;
  --color-brand-900: #2d4421;
  --color-brand-accent: #68a33f;

  --color-ink-50: #f7f7f7;
  --color-ink-100: #ededed;
  --color-ink-200: #dcdcdc;
  --color-ink-300: #c2c2c2;
  --color-ink-400: #9a9a9a;
  --color-ink-500: #6e6e6e;
  --color-ink-600: #5a5a5a;
  --color-ink-700: #464646;
  --color-ink-800: #333333;
  --color-ink-900: #1f1f1f;
  --color-ink-950: #141414;

  --shadow-card: 0 1px 2px rgb(31 31 31 / 0.04), 0 4px 16px rgb(31 31 31 / 0.06);
  --shadow-lift: 0 8px 28px rgb(31 31 31 / 0.1);
}

/*
 * Dark Mode. Die Komponenten benutzen durchgaengig die Skalen ink-* und brand-*
 * sowie canvas/surface - hier werden nur deren Werte getauscht, deshalb braucht
 * es keine dark:-Varianten im Markup.
 *
 * Zwei Ausnahmen bleiben absichtlich in beiden Modi gleich:
 *   ink-950 - liegt nur unter Dialog-Overlays, muss also dunkel bleiben
 *   text-white - steht immer auf farbigen Flaechen (Buttons, Termin-Chips)
 */
.dark {
  --color-canvas: #141414;
  --color-surface: #1c1c1c;

  /* Neutrale Skala gedreht: 50 = dunkelste Flaeche, 900 = hellster Text */
  --color-ink-50: #1f1f1f;
  --color-ink-100: #292929;
  --color-ink-200: #383838;
  /* Nicht die exakte Umkehrung von #c2c2c2: dunkler waeren Hinweistexte
     (text-ink-300) auf der Flaeche kaum noch zu lesen. */
  --color-ink-300: #6e6e6e;
  --color-ink-400: #909090;
  --color-ink-500: #a8a8a8;
  --color-ink-600: #bdbdbd;
  --color-ink-700: #d2d2d2;
  --color-ink-800: #e6e6e6;
  --color-ink-900: #f5f5f5;
  --color-ink-950: #000000;

  /*
   * brand-500 bleibt das CI-Gruen (Buttons). Die hellen Stufen werden zu
   * dunklen Tints (Hintergruende), die dunklen zu hellen Toenen (Text) - 600
   * dient beidem: als hellerer Button-Hover und als lesbare Textfarbe.
   */
  --color-brand-50: #1d2b15;
  --color-brand-100: #26381c;
  --color-brand-200: #3a5a29;
  --color-brand-300: #4e7739;
  --color-brand-400: #6b9f4f;
  --color-brand-600: #7fb75c;
  --color-brand-700: #a3cd8a;
  --color-brand-800: #c6e0b6;
  --color-brand-900: #e2efd9;

  /*
   * Statusfarben der Kontakte und Toasts sind getoente Pillen: helle Flaeche mit
   * dunklem Text. Im Dark Mode wird das gedreht. Die Stufen 500/600 bleiben
   * unberuehrt - dort steht weisse Schrift drauf (Loeschen-Button).
   */
  --color-sky-50: #0d2537;
  --color-sky-200: #1d4a6b;
  --color-sky-700: #7cc4ef;

  --color-amber-50: #2e2008;
  --color-amber-200: #5c4210;
  --color-amber-700: #f0b356;

  --color-violet-50: #241a3d;
  --color-violet-200: #3f2f66;
  --color-violet-700: #b49bf2;

  --color-red-50: #2e1414;
  --color-red-200: #5e2626;
  --color-red-700: #f28b8b;
}

@layer base {
  html,
  body {
    height: 100%;
  }

  body {
    background-color: var(--color-canvas);
    color: var(--color-ink-900);
    font-family: var(--font-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    /* Farbwechsel beim Umschalten laeuft weich, ohne Layout zu bewegen */
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 800;
    letter-spacing: -0.015em;
  }

  /* Fokus-Ring durchgaengig in CI-Gruen */
  :focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
}

@layer utilities {
  /*
   * Das perinco Logo ist fuer helle Hintergruende gemacht - der Zusatz unter
   * dem Wortzeichen ist dunkelgrau und waere im Dark Mode unsichtbar. invert
   * dreht die Helligkeit, hue-rotate holt das CI-Gruen zurueck.
   */
  .dark .logo-adaptive {
    filter: invert(1) hue-rotate(180deg);
  }

  .scrollbar-slim::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-slim::-webkit-scrollbar-thumb {
    background: var(--color-ink-200);
    border-radius: 999px;
  }
  .scrollbar-slim::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-300);
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}