/* ============================================================
   ARTintelligence — Design Tokens (Swiss Editorial · Material)
   Eine Stelle für Farben, Typo, Spacing, Tiefe, Motion.
   ============================================================ */

/* Body-Schrift selbst gehostet (DSGVO: kein Google-CDN) */
@font-face{font-family:'Plex';src:url('../fonts/plex-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --bg:#F6F6F3;          /* Basis Hintergrund, sehr helles Off-White */
  --surface:#FFFFFF;     /* Karten / Flächen */
  --surface-2:#EDEDE9;   /* Bild-Hintergründe, stille Flächen */
  --ink:#111113;         /* Text fast-Schwarz */
  --ink-2:#57575C;       /* Sekundärtext */
  --dark:#0E0E10;        /* dunkle Zonen Basis */
  --dark-2:#17171B;      /* dunkle Zonen heller Verlaufspunkt */
  --red:#E30613;         /* Akzent */
  --red-lite:#F5333F;    /* Verlaufs-Oberkante */
  --red-dark:#B0040F;    /* Verlaufs-Unterkante / Hover */
  /* Logo-Grün — für Struktur-Linien und Wappen-Embleme */
  --green:#4F8C57;
  --green-lite:#6FA875;
  --green-dark:#39683F;
  --line:#CBD8C6;        /* Hairline hell, subtil grün getönt */
  --line-strong:#111113; /* Struktur-Linien */
  --line-dark:rgba(111,168,117,.20); /* Hairline auf Dunkel, grün getönt */
  --ghost:#E7ECE4;       /* Ghost-Ziffern */
  --glow:rgba(227,6,19,.42); /* CTA-Glow */
  /* Grüne Linien-Verläufe (fadet an den Enden, glüht in der Mitte) */
  --line-green:linear-gradient(90deg,transparent,var(--green) 16%,var(--green-lite) 50%,var(--green) 84%,transparent);
  --grad-green:linear-gradient(158deg,var(--green-lite) 0%,var(--green) 50%,var(--green-dark) 100%);

  /* Typografie */
  --font-display:'Revoxa',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Plex',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  /* Type Scale */
  --fs-hero:clamp(2.7rem,5.2vw,4.7rem);
  --fs-h2:clamp(1.95rem,3.7vw,3.15rem);
  --fs-h3:clamp(1.1rem,1.8vw,1.35rem);
  --fs-lead:clamp(1.02rem,1.4vw,1.18rem);
  --fs-body:.97rem;
  --fs-sm:.86rem;
  --fs-label:.68rem;
  --fs-micro:.6rem;
  --lh-tight:1.0;
  --lh-body:1.62;
  --ls-label:.16em;

  /* Grid & Spacing */
  --maxw:1280px;
  --gutter:clamp(20px,3.4vw,40px);
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:clamp(88px,11vw,150px);

  /* Kanten */
  --radius:0px;
  --radius-lg:0px;

  /* Tiefe */
  --shadow-1:0 1px 2px rgba(17,17,19,.04);
  --shadow-2:0 10px 30px -12px rgba(17,17,19,.16);
  --shadow-3:0 26px 60px -20px rgba(17,17,19,.28);

  /* Material-Verläufe */
  --grad-red:linear-gradient(158deg,var(--red-lite) 0%,var(--red) 46%,var(--red-dark) 100%);
  --grad-dark:linear-gradient(165deg,var(--dark-2) 0%,var(--dark) 62%);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.28s;
}