/* Ikonenschmiede Design Tokens
   Source of truth: agents/rams/wissensbasis/components/tokens.css
   Synchronisiert in Welle 1 — 2026-05-04
   Webfonts lokal gehostet (Fontshare OFL, DSGVO-konform)
*/

/* === Webfonts (lokal, /assets/brand/fonts/) === */

@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Fontshare bietet Cabinet Grotesk in 600 nicht an. Wir mappen 600 auf 700,
   damit Stat-Card-Großzahlen (--ik-h-stat-weight) ohne Sub-Font funktionieren.
   Stand 2026-05-04 verifiziert. */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Base Colors === */
  --ik-black:           #0A0A0A;
  --ik-white:           #FAFAFA;        /* Off-White, nur Ausnahme — Body ist #FFFFFF */
  --ik-gray:            #F6F5F3;        /* Warm-Grau, sekundäre Sektion */
  --ik-gray-border:     #E8E6E1;
  --ik-text-secondary:  #555555;
  --ik-text-tertiary:   #999999;

  /* === Venetian Red (the only accent) === */
  --ik-red:             #B5453A;
  --ik-red-dark:        #6B251F;
  --ik-red-darkest:     #3D1714;

  /* === Metallic Accent (Venezianisch × Burgund, 135°) ===
     Used on filled buttons, tags, large stat numbers, num-circle accents,
     outline-hover text-clip, preise-sweep, inner-pulse. */
  --ik-red-metal-hi:    #B5453A;
  --ik-red-metal-core:  #9A3231;
  --ik-red-metal-deep:  #7A1420;
  --ik-red-metal:
    linear-gradient(135deg, #B5453A 0%, #B5453A 35%, #9A3231 75%, #7A1420 100%);
  --ik-red-metal-hover:
    linear-gradient(135deg, #9A3231 0%, #9A3231 35%, #7A1420 75%, #51000B 100%);

  /* === Liquid Shine — Filled Button Animation (Niko 2026-04-30 Button 20) ===
     Verlauf wandert von selbst über 4s. Background-size 200% damit Position animierbar. */
  --ik-red-metal-flow:
    linear-gradient(135deg, #B5453A 0%, #D85B4F 25%, #B5453A 50%, #9A3231 75%, #7A1420 100%);

  /* === Dark Surfaces === */
  --ik-dark-neutral:    #0A0A0A;        /* Default für alle Dark Sections */
  --ik-dark-warm:       #2B0A1E;        /* Aubergine-Plum — reserviert für Akademie-CTA-Schluss (Niko 2026-04-30 R4) */

  /* === Font Families === */
  /* Niko-Update 2026-05-01: Switzer ersetzt Instrument Sans als globaler Body-Font. */
  --ik-font-heading:    "Cabinet Grotesk", "Inter", system-ui, sans-serif;
  --ik-font-body:       "Switzer", "Inter", system-ui, sans-serif;

  /* === Heading Weights ===
     Niko-Update 2026-05-01: Audience-Split (Akademie 600 / Kartei 200) zurückgenommen.
     Cabinet 300 ist neue universelle Heading-Default für H1 + H2 auf allen Surfaces. */
  --ik-h1-weight: 300;   /* universell, beide Audiences */
  --ik-h2-weight: 300;   /* universell, beide Audiences */
  --ik-h3-weight: 500;   /* kleine Größen brauchen mehr Gewicht */
  --ik-h4-weight: 500;   /* dito */
  /* Legacy-Aliasse (für bestehende Skills/Prototypen, alle auf 300 gesetzt): */
  --ik-akademie-h1-weight: var(--ik-h1-weight);
  --ik-akademie-h2-weight: var(--ik-h2-weight);
  --ik-kartei-h1-weight:   var(--ik-h1-weight);
  --ik-kartei-h2-weight:   var(--ik-h2-weight);

  /* === Spacing (4px grid) === */
  --ik-space-1:  4px;
  --ik-space-2:  8px;
  --ik-space-3:  12px;
  --ik-space-4:  16px;
  --ik-space-6:  24px;
  --ik-space-8:  32px;
  --ik-space-12: 48px;
  --ik-space-16: 64px;
  --ik-space-24: 96px;

  /* === Radii ===
     Border-Radius = 0 überall. Ausnahme: Nummernkreise als Form (50%). */
  --ik-radius-default:  0;
  --ik-radius-circle:   50%;

  /* === Borders === */
  --ik-border-hairline: 0.5px solid var(--ik-gray-border);
  --ik-border-button:   1px solid var(--ik-red);
  --ik-border-filled:   1px solid var(--ik-red-darkest);
  --ik-border-ghost:    1.5px solid rgba(255,255,255,0.35);

  /* === Motion === */
  --ik-ease-default:    cubic-bezier(0.16, 1, 0.3, 1);
  --ik-duration-instant: 100ms;
  --ik-duration-fast:    200ms;
  --ik-duration-normal:  300ms;
  --ik-duration-slow:    500ms;
  --ik-duration-reveal:  700ms;

  /* === Layout === */
  --ik-content-max:     1200px;
  --ik-page-padding:    24px;
}