/* =============================================================
   tokens.css — SALESHAX Design-System
   Quelle: SHX FIGMA 2.0 / colors_and_type.css
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

@font-face {
  font-family: "Gestura Display";
  src: url("/fonts/GesturaDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gestura Display";
  src: url("/fonts/GesturaDisplay-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gestura Display";
  src: url("/fonts/GesturaDisplay-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gestura Display";
  src: url("/fonts/GesturaDisplay-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Neutrale Basis --- */
  --shx-white:      rgb(255, 255, 255);
  --shx-black:      rgb(0, 0, 0);
  --shx-near-black: rgb(10, 10, 10);
  --shx-ink:        rgb(0, 7, 10);
  --shx-off-white:  rgb(250, 250, 250);
  --shx-bg-warm:    rgb(245, 243, 239);

  /* --- Grau-Rampe --- */
  --shx-grey-900: rgb(58, 58, 58);
  --shx-grey-700: rgb(65, 65, 65);
  --shx-grey-600: rgb(101, 101, 101);
  --shx-grey-500: rgb(102, 102, 102);
  --shx-grey-450: rgb(114, 114, 114);
  --shx-grey-400: rgb(142, 142, 142);
  --shx-grey-350: rgb(153, 153, 153);
  --shx-grey-250: rgb(217, 217, 217);
  --shx-grey-150: rgb(237, 237, 237);
  --shx-grey-100: rgb(239, 239, 239);

  /* --- Sky: der einzige Akzent --- */
  --shx-sky-050: rgb(224, 239, 245);
  --shx-sky-100: rgb(186, 225, 240);
  --shx-sky-200: rgb(144, 207, 232);
  --shx-sky-300: rgb(110, 213, 253);
  --shx-sky-400: rgb(47, 186, 240);
  --shx-sky-500: rgb(23, 150, 201);
  --shx-sky-600: rgb(12, 133, 180);
  --shx-sky-900: rgb(2, 50, 79);

  /* --- WhatsApp (nur fuer Delivery-Signale) --- */
  --wa-green: #25D366;
  --wa-deep:  #128C7E;
  --wa-bg:    #eaf6ec;
  --wa-text:  #3f8a4a;

  /* --- Typografie --- */
  --shx-font-serif: "Gestura Display", "Times New Roman", serif;
  --shx-font-sans:  "Geist", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shx-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Easing --- */
  --shx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --shx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Radien --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 100px;
}