/* ============================================================
   nullzwo Design System · Colors & Typography
   Source: brand-guideline.md by Dalibor Pajic, 12.04.2026
   ============================================================ */

/* ---------- Font Faces ----------
   Schriften kommen via Adobe Fonts (Typekit-Kit hmq8jca).
   Lizenz: Adobe Creative Cloud Subscription deckt Web-Embedding via Typekit-CDN.
   Self-Hosted Fonts wurden entfernt (Lizenz-Konformitaet).

   Family-Namen aus dem Kit (lowercase, Bindestrich):
     - rockwell, rockwell-condensed   (Headlines)
     - new-hero, new-hero-hairline    (Body)
     - helvetica-lt-pro               (UI, alternative Headlines)
*/

@import url("https://use.typekit.net/hmq8jca.css");

/* ---------- Tokens ---------- */

:root {
  /* --- Brand Colors (named per brand guide) --- */
  --color-bayside:        #57C7C2;  /* Helles Teal. Hover, Akzente */
  --color-duron-cruising: #007994;  /* PRIMARY. Logo-Schlüssel, CTA, Links */
  --color-bleu-ash:       #A6C2CC;  /* Helles Blaugrau. BG, Borders */
  --color-filoli-iris:    #415C6E;  /* Dunkles Blaugrau. Wordmark, Fließtext */
  --color-pearl-gray:     #DBDCDB;  /* Hellgrau. Trennlinien, dezente BG */
  --color-apple-valley:   #E4D245;  /* Gelb-Akzent. Warnungen, Highlights */

  /* --- Extended Palette (Landing-Page Dramaturgie) --- */
  --color-black:        #0a0a0a;
  --color-near-black:   #1a1a1a;
  --color-charcoal:     #2a2f33;
  --color-white:        #ffffff;
  --color-off-white:    #f5f5f5;
  --color-paper:        #fafafa;

  /* --- Severity / Kritikalität, AUSSCHLIESSLICH Reports --- */
  /* Source of Truth: nullzwo Macroscope-Report.
     NICHT Teil der Brand-Palette. Niemals in Marketing, Slides oder UI verwenden.
     Macroscope-Schema (kanonisch) und semantische Aliase zeigen auf identische Hex-Werte. */

  /* Macroscope-Schema (kanonisch) */
  --red:           #C62828;   /* Critical Font */
  --orange:        #F57C00;   /* High Font */
  --amber:         #F2B01E;   /* Medium Font */
  --green:         #2E7D32;   /* Low Font */
  --dark_green:    #1B5E20;
  --info:          #00796B;   /* Info Font */
  --bg-critical:   #FFEBEE;
  --bg-high:       #FFF3E0;
  --bg-medium:     #FFF8E1;
  --bg-low:        #E8F5E9;
  --bg-info:       #E0F2F1;

  /* Risk-ID-Badge (Macroscope) */
  --risk-id:       #7B5EA7;   /* lila Font */
  --bg-risk-id:    #F0EBF5;

  /* Semantische Aliase. Zeigen auf dieselben Werte wie Macroscope-Schema */
  --severity-critical:     var(--red);
  --severity-critical-bg:  var(--bg-critical);
  --severity-high:         var(--orange);
  --severity-high-bg:      var(--bg-high);
  --severity-medium:       var(--amber);
  --severity-medium-bg:    var(--bg-medium);
  --severity-low:          var(--green);
  --severity-low-bg:       var(--bg-low);
  --severity-info:         var(--info);
  --severity-info-bg:      var(--bg-info);

  /* --- Semantic Aliases --- */
  --color-primary:      var(--color-duron-cruising);
  --color-primary-hover:var(--color-bayside);
  --color-accent:       var(--color-apple-valley);

  --bg-canvas:          var(--color-white);
  --bg-subtle:          var(--color-off-white);
  --bg-muted:           var(--color-pearl-gray);
  --bg-inverse:         var(--color-black);
  --bg-inverse-soft:    var(--color-near-black);

  --fg-1:               var(--color-filoli-iris);   /* primary text */
  --fg-2:               #5a7180;                    /* secondary text */
  --fg-3:               #87a0ad;                    /* tertiary / meta */
  --fg-on-dark:         var(--color-white);
  --fg-on-dark-2:       #c7d2d8;
  --fg-on-primary:      var(--color-white);

  --border-subtle:      var(--color-pearl-gray);
  --border-default:     var(--color-bleu-ash);
  --border-strong:      var(--color-filoli-iris);

  --link:               var(--color-duron-cruising);
  --link-hover:         var(--color-filoli-iris);

  /* --- Typography Stacks (Adobe Fonts via Typekit) --- */
  --font-headline:      'rockwell', 'Rockwell Nova', 'Roboto Slab', Georgia, serif;
  --font-headline-cond: 'rockwell-condensed', 'rockwell', 'Roboto Slab', Georgia, serif;
  --font-body:          'new-hero', 'Helvetica Neue', 'Inter', Arial, sans-serif;
  --font-body-hairline: 'new-hero-hairline', 'new-hero', 'Helvetica Neue', Arial, sans-serif;
  --font-helvetica:     'helvetica-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:          'JetBrains Mono', 'Menlo', 'Consolas', ui-monospace, monospace;

  /* --- Type Scale (display) --- */
  --fs-display:   clamp(56px, 8vw, 112px);   /* hero monolith */
  --fs-h1:        clamp(40px, 5vw, 72px);
  --fs-h2:        clamp(30px, 3.4vw, 48px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-lead:      20px;
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.16em;

  /* --- Spacing (8px-base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* --- Radii, sparing, premium --- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* --- Shadows, restrained --- */
  --shadow-1: 0 1px 2px rgba(15, 30, 40, 0.04);
  --shadow-2: 0 4px 16px rgba(15, 30, 40, 0.06);
  --shadow-3: 0 12px 40px rgba(15, 30, 40, 0.10);
  --shadow-focus: 0 0 0 3px rgba(0, 121, 148, 0.25);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --section-gap: clamp(64px, 10vh, 128px);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ---------- Semantic element styles ---------- */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); }

.display, .nz-display {
  font-family: var(--font-headline);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow, .nz-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-duron-cruising);
}

.lead, .nz-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 60ch;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0 0 1em;
  max-width: 70ch;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Selection. Match brand */
::selection {
  background: var(--color-duron-cruising);
  color: var(--color-white);
}