/* ─────────────────────────────────────────────────────────────
   Hostworld Design System · Colors & Typography
   Ported 1:1 from _design/hostworld-design-system/colors_and_type.css
   Self-hosted Biennale (MyFonts Webfont License, 6 weights).
   Heavy (800) replaces former Black (900); Italic (400i) added.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biennale";
  src: url("../fonts/biennale/Biennale-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Primary ──────────────────────────── */
  --hw-cloud-white:  #FAFBFF;
  --hw-brand-yellow: #FBDE37;
  --hw-navy-deep:    #2B4358;
  --hw-amber-gold:   #FBA837;

  /* ── Grayscale ────────────────────────── */
  --hw-cloud:    #EDEFF7;
  --hw-smoke:    #D3D6E0;
  --hw-steel:    #5D616E; /* >=4.5:1 auf Weiß und Cloud (WCAG AA) */
  --hw-steel-light: #BCBFCC; /* nur auf dunklen Flächen (Footer, CTA, Navy) */
  --hw-space:    #9DA2B3;
  --hw-graphite: #63677A; /* >=4.5:1 auch auf Cloud-Hintergrund */
  --hw-arsenic:  #40424D;
  --hw-phantom:  #1E1E24;
  --hw-black:    #000000;

  /* ── Semantic (light theme) ──────────── */
  --bg:           var(--hw-cloud-white);
  --bg-elevated:  #FFFFFF;
  --bg-muted:     var(--hw-cloud);
  --bg-inverse:   var(--hw-navy-deep);

  --fg:           var(--hw-phantom);
  --fg-strong:    var(--hw-navy-deep);
  --fg-muted:     var(--hw-graphite);
  --fg-subtle:    var(--hw-space);
  --fg-on-dark:   var(--hw-cloud-white);
  --fg-on-yellow: var(--hw-navy-deep);
  /* Akzenttext (Ziffern, Aktionshinweise, TLD-Punkt): hell abgedunkeltes Amber, 4,88:1 auf
     Cloud-Weiß; dunkel und auf dunklen Flächen das Markengelb (Briefing 195, Block 2). */
  --fg-accent:    #9C6203;

  --border:        var(--hw-cloud);
  --border-strong: var(--hw-smoke);
  --border-focus:  var(--hw-navy-deep);

  /* Section-rhythm tints — used to create warmth without going colourful.
     Each is one shade away from white, picked to set a distinct mood:
       header   = neutral warm-cool gray (separates header from page)
       navy     = cool, "premium tech" mood (e.g. WordPress section)
       yellow   = warm, "celebration" mood (e.g. awards section) */
  --hw-bg-header:      #F8F9FB;
  --hw-border-header:  #E5E8ED;
  /* Fuß: eigene Bedeutungsebene (Briefing 193, Block 0a, Max 29.08.): folgt dem Thema,
     hell als eigene, deckende Fläche. Die Kopf-Fläche taugt dafür nicht: der Kopf ist in
     Ruhe transparent, und #F8F9FB gegen die Seite #FAFBFF sind 1,019:1, unsichtbar.
     #F1F3F7 liegt bei 1,074:1 zur Seite, --fg-muted darauf 5,04:1, Spaltentitel 9,24:1. */
  --hw-bg-footer:      #F1F3F7;
  --hw-bg-navy-tint:   #F5F7FA;
  --hw-bg-yellow-tint: #FFFCF0;

  /* Icon-box brand gradient — applied to abgesetzte icon containers across
     feature, product and benefit cards. NOT for buttons (flat yellow stays),
     NOT for pricing badges/pills, NOT for menu icons, NOT for state indicators. */
  --hw-icon-box-bg: linear-gradient(135deg, #FBDE37 0%, #FBA837 100%);

  --accent:        var(--hw-brand-yellow);
  --accent-hover:  var(--hw-amber-gold);
  --accent-fg:     var(--hw-navy-deep);

  --status-ok:     #1F9D55;
  --status-warn:   var(--hw-amber-gold);
  --status-error:  #D64545;
  --status-info:   var(--hw-navy-deep);

  /* ── Type ─────────────────────────────── */
  --font-sans:    "Biennale", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display:   clamp(56px, 7vw, 96px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(32px, 3.6vw, 44px);
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-h5:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;

  --lh-display:   1.02;
  --lh-heading:   1.12;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --tr-display:   -0.02em;
  --tr-heading:   -0.015em;
  --tr-body:       0;
  --tr-eyebrow:    0.12em;

  /* ── Spacing (4px base) ───────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Radii ─────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ── Shadows ────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(43, 67, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(43, 67, 88, 0.06), 0 1px 2px rgba(43, 67, 88, 0.04);
  --shadow-md: 0 8px 20px rgba(43, 67, 88, 0.08), 0 2px 6px rgba(43, 67, 88, 0.04);
  --shadow-lg: 0 24px 48px rgba(43, 67, 88, 0.12), 0 4px 12px rgba(43, 67, 88, 0.06);
  --shadow-focus: 0 0 0 3px rgba(251, 222, 55, 0.45);

  /* ── Motion ───────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ── Layout ───────────────────────────── */
  --container-max: 1280px;
  --gutter:        clamp(16px, 4vw, 48px);

  /* Farbleiter der gezeichneten Motive (SceneIcon und Verwandte).
     Hell entspricht 1:1 dem bisherigen Bestand, damit sich am Tag
     nichts aendert. Dunkel dreht die Leiter um: die Kontur wird hell,
     das Blatt dunkel, die Fuellstufen bleiben in ihrer Reihenfolge.
     In den SVGs stehen diese Merkmale MIT Ersatzwert im var() – anders
     als sonst im Projekt ist das dort erwuenscht: Merkmale in
     SVG-Praesentationsattributen versteht erst Safari 15, der
     Ersatzwert zeigt aelteren Browsern die Zeichnung wie bisher. */
  --ill-kontur:  #2B4358;
  --ill-blatt:   #FFFFFF;
  --ill-fuell-1: #F7F8FC;
  --ill-fuell-2: #EDEFF7;
  --ill-fuell-3: #E7EAF4;
  --ill-linie-1: #C9D0E2;
  --ill-linie-2: #C6CEDD;
}

.hw-on-dark {
  --bg: var(--hw-navy-deep);
  --bg-elevated: #324c63;
  --bg-muted: #233848;
  --fg: var(--hw-cloud-white);
  --fg-strong: #FFFFFF;
  --fg-muted: var(--hw-steel-light);
  --fg-subtle: var(--hw-steel-light);
  --fg-accent: var(--hw-brand-yellow);   /* Amber auf Navy nur 2,03:1 */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  color: var(--fg);
  background: var(--bg);
}

/* ─────────────────────────────────────────────────────────────
   Dunkelmodus (data-theme wird vom Inline-Skript in BaseLayout
   gesetzt: Cookie hw-theme bzw. prefers-color-scheme).
   Markenfarben und Grauskala bleiben unveraendert – umdefiniert
   wird ausschliesslich die Bedeutungsebene.
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #131C24;   /* Grundflaeche, aus dem Marken-Navy abgedunkelt */
  --bg-elevated:  #1B2833;   /* Karten und Panels heben sich ab */
  --bg-muted:     #0F161C;   /* abgesetzte Abschnitte, variant="soft" */
  --bg-inverse:   var(--hw-cloud-white);

  --fg:           #E6EAF0;
  --fg-strong:    #FFFFFF;
  --fg-muted:     #A2ADBA;
  --fg-subtle:    #87919E;
  --fg-on-dark:   #E6EAF0;
  --fg-on-yellow: var(--hw-navy-deep);
  --fg-accent:    var(--hw-brand-yellow);   /* 12,8:1 auf dem Grund, 11,2:1 auf der Sektion */

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus:  var(--hw-brand-yellow);

  --hw-bg-header:      #16202A;
  --hw-border-header:  rgba(255, 255, 255, 0.10);
  --hw-bg-footer:      var(--hw-bg-header);   /* Fuß und Kopf auf derselben Ebene, gleicher Farbstich */
  --hw-bg-navy-tint:   #101922;
  /* Kein warmer Farbstich im Dunkeln (wirkt braun) - der Abschnitt wird
     neutral, die Waerme kommt aus den gelben Auszeichnungs-Elementen. */
  --hw-bg-yellow-tint: var(--bg-muted);

  --status-ok:    #3FBF7F;
  --status-error: #F0736B;
  /* Hell bleibt --status-info auf dem Marken-Navy - auf Dunkel ist das
     unbrauchbar, deshalb hier ein heller, kuehler Ton (achter
     Kundenmenue-Durchgang, Meldungsflaechen). */
  --status-info:  #6FB6E8;

  /* Schatten tragen auf Dunkel nicht, sie muessen tiefer und weicher werden */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .40);

  /* Farbleiter der Zeichnungen, dunkle Fassung. Das Blatt ist bewusst
     eine Spur heller als die Karte darunter (--bg-elevated #1B2833),
     sonst verschwindet der gezeichnete Gegenstand im Untergrund. */
  --ill-kontur:  #DCE3EA;
  --ill-blatt:   #212E3A;
  --ill-fuell-1: #202D38;
  --ill-fuell-2: #22303C;
  --ill-fuell-3: #26343F;
  --ill-linie-1: #3B4A58;
  --ill-linie-2: #40505E;
}

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

/* Im Dunkelmodus fuegt sich der Navy-Block in die dunkle Flaeche ein.
   var(--bg-elevated) genuegt hier NICHT: .hw-on-dark belegt --bg-elevated
   selbst neu (helles Navy), die Referenz wuerde am Element dorthin
   aufloesen – deshalb stehen die dunklen Werte direkt. */
:root[data-theme="dark"] .hw-on-dark {
  --bg: #1B2833;
  --bg-elevated: #223140;
  --bg-muted: #16202A;
  --fg-muted: #A2ADBA;
  --fg-subtle: #87919E;
}