/**
 * Köck Richter Ingenieure — CI Design Tokens
 * Quelle: Kreativkonzept Mai 2026 / Logo_und_Farbdefinitionen
 * ─────────────────────────────────────────────────────────────
 * Verwendung: @import 'ci-tokens.css' in jede CSS-Datei.
 * Alle Werte als CSS Custom Properties (var(--token-name)).
 */

/* ── Lokale Webfonts (selbst gehostet) ─────────────────────────
 * Keine Übertragung an Google. Dateien unter ./fonts/ (WOFF2, Latin).
 * Cocon Pro (Display/Headlines) ist lizenzpflichtig (Monotype/FontFont);
 * Übergangs-Fallback: 'Nunito'. Fließtext/UI: 'Lexend Deca'.
 * ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Lexend Deca';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/lexend-deca-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lexend Deca';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/lexend-deca-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/nunito-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/nunito-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/nunito-latin-700-normal.woff2') format('woff2');
}


:root {

  /* ════════════════════════════════════
     FARBEN
     ════════════════════════════════════ */

  /* Primärpalette */
  --color-engineer-blue:    #1E3250;   /* CMYK 95|80|45|35  — Hauptfarbe */
  --color-energy-cyan:      #4BC8E6;   /* CMYK 60|0|5|0     — Hintergrund/Akzent */
  --color-efficiency-green: #82C891;   /* CMYK 50|0|55|0    — Logo-Punkt / Akzent */
  --color-insight-purple:   #A082BE;   /* CMYK 40|50|0|0    — Tertiär-Akzent */

  /* Neutral */
  --color-white:            #FFFFFF;
  --color-off-white:        #F4F6F9;
  --color-light-gray:       #E8ECF1;
  --color-mid-gray:         #8A9BB0;
  --color-dark-gray:        #3A4A5C;

  /* Semantische Farben */
  --color-primary:          var(--color-engineer-blue);
  --color-primary-light:    var(--color-energy-cyan);
  --color-accent:           var(--color-efficiency-green);
  --color-tertiary:         var(--color-insight-purple);

  /* Text */
  --color-text-default:     var(--color-engineer-blue);
  --color-text-on-dark:     var(--color-white);
  --color-text-muted:       var(--color-mid-gray);

  /* Hintergründe */
  --color-bg-default:       var(--color-white);
  --color-bg-subtle:        var(--color-off-white);
  --color-bg-dark:          var(--color-engineer-blue);
  --color-bg-brand:         var(--color-energy-cyan);


  /* ════════════════════════════════════
     TYPOGRAFIE
     ════════════════════════════════════ */

  /* Schriften */
  --font-display: 'Cocon Pro', 'Cocon', 'Nunito', sans-serif;  /* Headlines */
  --font-body:    'Lexend Deca', sans-serif;                    /* Fließtext, UI */

  /* Gewichte */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* Schriftgrößen (fluid-ready) */
  --font-size-xs:   0.75rem;    /*  12px */
  --font-size-sm:   0.875rem;   /*  14px */
  --font-size-base: 1rem;       /*  16px */
  --font-size-lg:   1.125rem;   /*  18px */
  --font-size-xl:   1.375rem;   /*  22px */
  --font-size-2xl:  1.75rem;    /*  28px */
  --font-size-3xl:  2.25rem;    /*  36px */
  --font-size-4xl:  3rem;       /*  48px */
  --font-size-5xl:  4rem;       /*  64px */

  /* Zeilenhöhen */
  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* Zeichenabstand */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.06em;
  --letter-spacing-wider:   0.12em;


  /* ════════════════════════════════════
     ABSTÄNDE (Spacing Scale)
     ════════════════════════════════════ */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */


  /* ════════════════════════════════════
     BORDER RADIUS
     ════════════════════════════════════ */

  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2.5rem;    /* 40px */
  --radius-full: 9999px;

  /*
   * Button-Form: Viertelkreis-Motiv diagonal
   * border-radius: var(--radius-btn) 0 var(--radius-btn) 0
   * → oben-links und unten-rechts gerundet, oben-rechts und unten-links scharf
   */
  --radius-btn: var(--radius-2xl);  /* 40px — greift das Viertelkreis-Motiv auf */


  /* ════════════════════════════════════
     SCHATTEN
     ════════════════════════════════════ */

  --shadow-xs: 0 1px 2px  rgba(30, 50, 80, 0.07);
  --shadow-sm: 0 2px 6px  rgba(30, 50, 80, 0.10);
  --shadow-md: 0 4px 16px rgba(30, 50, 80, 0.12);
  --shadow-lg: 0 8px 32px rgba(30, 50, 80, 0.16);
  --shadow-xl: 0 16px 56px rgba(30, 50, 80, 0.20);


  /* ════════════════════════════════════
     ÜBERGÄNGE / ANIMATION
     ════════════════════════════════════ */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms ease;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ════════════════════════════════════
     LAYOUT / GRID
     ════════════════════════════════════ */

  --container-max:        1200px;
  --container-max-wide:   1440px;
  --container-padding:    var(--space-6);
  --container-padding-lg: var(--space-12);

  --grid-cols:   12;
  --grid-gap:    var(--space-6);
  --grid-gap-sm: var(--space-4);


  /* ════════════════════════════════════
     Z-INDEX SKALA
     ════════════════════════════════════ */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     9999;

}


/* ════════════════════════════════════════════════════════════
   BASIS-STILE (opt-in via :root)
   Ergänzende Basisklassen, die auf den Tokens aufbauen.
   ════════════════════════════════════════════════════════════ */

/* Typografische Utilities */
.text-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-default);
}

.text-display-light {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
}

.text-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-default);
}

/* Farbflächen */
.bg-engineer-blue    { background-color: var(--color-engineer-blue); color: var(--color-white); }
.bg-energy-cyan      { background-color: var(--color-energy-cyan);   color: var(--color-engineer-blue); }
.bg-efficiency-green { background-color: var(--color-efficiency-green); color: var(--color-engineer-blue); }
.bg-insight-purple   { background-color: var(--color-insight-purple); color: var(--color-white); }

/* Geometrisches Formelement (KR-Viertelkreis-Motiv) */
.shape-quarter-circle {
  border-radius: 0 0 50% 0 / 0 0 50% 0;   /* bottom-right */
  background-color: var(--color-primary);
}

.shape-semicircle-right {
  border-radius: 0 50% 50% 0;
  background-color: var(--color-primary);
}