/* ==========================================================================
   Design-Tokens – MedLog Consult (Richtung „Visitenkarte“: monochrom-editorial)
   Schwarz/Weiß mit 1-px-Linien in Tintenfarbe, Kartengrau als zweite Fläche,
   Farbe nur aus Bildmarke, Säulen-Icons und wenigen Akzenten.
   Light/Dark über light-dark() + color-scheme.
   ========================================================================== */
@layer tokens, base, layout, components, utilities;

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Neutral */
    --bg:          light-dark(#ffffff, #15181b);
    --bg-alt:      light-dark(#e6e7e8, #1d2126);   /* Kartengrau der Visitenkarten-Rückseite */
    --bg-elev:     light-dark(#ffffff, #22272d);
    --ink:         light-dark(#1a1d21, #e9eaec);
    --ink-soft:    light-dark(#3f444b, #c3c8ce);
    --ink-muted:   light-dark(#5b6169, #a4aab2);
    --rule:        light-dark(#1a1d21, #cfd3d8);   /* harte Linien (editorial) */
    --line:        light-dark(#d9dbdf, #2e333a);   /* weiche Linien (Karten, Tabellen) */
    --line-strong: light-dark(#b9bdc3, #3d434b);
    --wave:        light-dark(#9a9fa6, #434a52);   /* Linienfeld */

    /* Markenfarben (Bildmarke) */
    --blue:          light-dark(#3b90c8, #5aa8d9);
    --blue-deep:     light-dark(#2a678d, #3b90c8);
    --blue-deepest:  light-dark(#1d4b68, #2a678d);
    --pink:          light-dark(#de6d9a, #e889ad);
    --pink-deep:     light-dark(#9b4d6d, #de6d9a);
    --pink-deepest:  light-dark(#73384f, #9b4d6d);
    --green:         light-dark(#2ca576, #3fbb8a);
    --green-deep:    light-dark(#1f7554, #2ca576);
    --green-deepest: light-dark(#10573d, #1f7554);

    /* Semantik */
    --link:              var(--ink);
    --link-hover:        light-dark(#2a678d, #7fbde6);
    --focus:             color-mix(in oklab, var(--blue) 60%, transparent);
    --btn-primary-bg:    var(--ink);
    --btn-primary-ink:   var(--bg);
    --btn-primary-hover: light-dark(#2a678d, #5aa8d9);
    --btn-green-bg:      light-dark(#1f7554, #3fbb8a);
    --btn-green-ink:     light-dark(#ffffff, #0b1f17);
    --shadow-hover:      0 10px 30px -14px rgb(0 0 0 / .25);

    /* Form & Maß */
    --radius:     0px;
    --radius-lg:  0px;
    --container:  1200px;
    --gutter:     clamp(1rem, 4vw, 2.5rem);
    --section:    clamp(4rem, 8vw, 7rem);
    --header-h:   5.25rem;
    --ease:       cubic-bezier(.2, .7, .2, 1);
    /* Zentrale Zeiten: Hover-Farbwechsel, kleine Bewegungen (Pfeile, Einrücken), langsame Blenden */
    --t-hover:    .3s;
    --t-move:     .35s;
    --t-slow:     .5s;

    /* Typo */
    --font: "Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);
    --fs-h2:      clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
    --fs-h3:      1.375rem;
    --fs-body:    1.0625rem;
    --fs-small:   0.9375rem;
    --fs-eyebrow: 0.75rem;
    --track-eyebrow: .3em;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* Deckkraft des Linienfelds im Seiten-Hero: hell zurückhaltend, dunkel voll (opacity kennt kein light-dark) */
  :root { --page-waves-alpha: .55; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-waves-alpha: 1; } }
  :root[data-theme="dark"] { --page-waves-alpha: 1; }

  /* Säulen-Farben: eine Variable, die Komponenten erben */
  .pillar--blue  { --pillar: var(--blue);  --pillar-deep: var(--blue-deep);  --pillar-deepest: var(--blue-deepest); }
  .pillar--pink  { --pillar: var(--pink);  --pillar-deep: var(--pink-deep);  --pillar-deepest: var(--pink-deepest); }
  .pillar--green { --pillar: var(--green); --pillar-deep: var(--green-deep); --pillar-deepest: var(--green-deepest); }
}