/* ==========================================================================
   KLINGE — Barbershop Köln-Ehrenfeld
   00-tokens.css · Fundament des Designsystems (nicht aus Sektionsdateien ändern)

   Archetyp: „Machined Steel" — Kohle-Schwarz, Kreide, gebürsteter Stahl,
   ein einziger Signalton (Barber-Rot). Harte Kanten statt Squircles,
   kondensierte Versalien statt Serifen. Bewusst das Gegenteil von SEIDE.
   ========================================================================== */

:root {
  /* ---- Farbe --------------------------------------------------------- */
  --c-coal:        #0B0B0C;   /* Seitengrund */
  --c-asphalt:     #101013;   /* Sektion, minimal aufgehellt */
  --c-steel:       #17181B;   /* Panelgrund */
  --c-steel-lift:  #202227;   /* Panel, angehoben */
  --c-chalk:       #EDEAE4;   /* helle Sektion */
  --c-chalk-deep:  #DCD7CE;
  --c-chalk-warm:  #F7F4EF;
  --c-signal:      #C4402C;   /* Barber-Rot — der einzige Akzent */
  --c-signal-lite: #DD6249;
  --c-signal-deep: #8C2A1B;
  --c-blade:       #9BA2A9;   /* kühles Stahlgrau */

  /* Text auf dunklem Grund (Standard) */
  --t-strong:     #F2EFE9;
  --t-body:       rgba(242, 239, 233, 0.64);
  --t-muted:      rgba(242, 239, 233, 0.46);
  --t-faint:      rgba(242, 239, 233, 0.22);
  /* Text auf hellem Grund */
  --t-strong-inv: #121214;
  --t-body-inv:   rgba(18, 18, 20, 0.66);
  --t-muted-inv:  rgba(18, 18, 20, 0.50);
  --t-faint-inv:  rgba(18, 18, 20, 0.26);

  /* Hairlines & Flächen */
  --line:          rgba(242, 239, 233, 0.13);
  --line-soft:     rgba(242, 239, 233, 0.07);
  --line-strong:   rgba(242, 239, 233, 0.24);
  --line-inv:      rgba(18, 18, 20, 0.14);
  --line-inv-soft: rgba(18, 18, 20, 0.07);
  --line-inv-strong: rgba(18, 18, 20, 0.28);
  --surface:       rgba(242, 239, 233, 0.045);
  --surface-deep:  rgba(242, 239, 233, 0.08);
  --surface-inv:   rgba(18, 18, 20, 0.045);

  /* Tiefe: kühl, nie schwarz-hart; auf Dunkel zusätzlich Innenkante */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 18px -8px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.30), 0 22px 48px -22px rgba(0, 0, 0, 0.70);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.32), 0 52px 96px -44px rgba(0, 0, 0, 0.80);
  --edge:      inset 0 1px 0 rgba(242, 239, 233, 0.07);
  --edge-inv:  inset 0 1px 0 rgba(255, 255, 255, 0.70);

  /* ---- Typografie ----------------------------------------------------- */
  --f-display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --f-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-mega:    clamp(3.8rem, 16.5vw, 15rem);
  --fs-display: clamp(3rem, 9.6vw, 8.6rem);
  --fs-h1:      clamp(2.6rem, 7vw, 6rem);
  --fs-h2:      clamp(2.1rem, 5.2vw, 4.4rem);
  --fs-h3:      clamp(1.4rem, 2.5vw, 2.15rem);
  --fs-h4:      clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body:    clamp(0.975rem, 1vw, 1.0625rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-micro:   0.6875rem;

  --lh-blade:  0.84;   /* kondensierte Versalien */
  --lh-tight:  0.92;
  --lh-snug:   1.12;
  --lh-body:   1.62;
  --tr-micro:  0.26em; /* Laufweite der Mono-Labels */

  /* ---- Raum & Rhythmus ------------------------------------------------- */
  --gutter:     clamp(1.15rem, 4vw, 4rem);
  --maxw:       1440px;
  --maxw-text:  60ch;
  --sp-section: clamp(5.5rem, 11vw, 11.5rem);
  --sp-block:   clamp(2.75rem, 5.5vw, 5.5rem);
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;  --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4rem;  --sp-8: 6rem;

  /* ---- Radien: Maschinenbau, keine Squircles --------------------------- */
  --r-lg:   6px;
  --r-md:   4px;
  --r-sm:   2px;
  --r-pill: 999px;
  --bezel:  6px;                              /* Rahmenstärke der Schale */
  --r-core: calc(var(--r-lg) - 2px);          /* konzentrischer Innenradius */

  /* ---- Motion ---------------------------------------------------------- */
  --e-sleek: cubic-bezier(0.32, 0.72, 0, 1);
  --e-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-mass:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-back:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast:  240ms;
  --d-base:  480ms;
  --d-slow:  720ms;
  --d-epic:  1050ms;

  /* ---- Ebenen ---------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  20;
  --z-nav:     40;
  --z-overlay: 60;
  --z-modal:   70;
  --z-grain:   90;

  /* ---- Muster: Barber-Streifen (DNA der Marke) ------------------------- */
  --stripe: repeating-linear-gradient(
    -45deg,
    var(--c-signal) 0 6px,
    transparent 6px 12px,
    var(--t-strong) 12px 18px,
    transparent 18px 24px
  );
}

/* Helle Sektionen: Farbrollen invertieren, Komponenten bleiben identisch.
   KLINGE ist standardmäßig dunkel — .on-light ist die Ausnahme.            */
.on-light {
  --t-strong:      var(--t-strong-inv);
  --t-body:        var(--t-body-inv);
  --t-muted:       var(--t-muted-inv);
  --t-faint:       var(--t-faint-inv);
  --line:          var(--line-inv);
  --line-soft:     var(--line-inv-soft);
  --line-strong:   var(--line-inv-strong);
  --surface:       var(--surface-inv);
  --surface-deep:  rgba(18, 18, 20, 0.075);
  --edge:          var(--edge-inv);
  color: var(--t-strong-inv);
  background: var(--c-chalk);
}