/* ==========================================================================
   Flatpay Design System — Tokens
   Colors, typography, spacing, radii, shadows — as CSS custom properties.
   Use --fp-* prefix to avoid collisions.
   ========================================================================== */

/* Brand fonts.
   - Founders Grotesk X-Condensed — display/marquee headlines
   - Inter Tight — body, UI, sub-display

   We declare the Founders OTFs TWICE: once via @font-face url(...) for
   normal page loads (works reliably in most browsers, including html-to-
   image offscreen rendering used by tooling), and once via a JS loader
   (fonts/load-fonts.js) as a fallback for Chromium builds that fail to
   decode the CFF table from the url() source.

   Use --font-display (which aliases "Flatpay Display") in your CSS. */

@font-face {
  font-family: "Flatpay Display";
  src: url("fonts/FoundersGroteskXCondensed-Semibold.otf");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Flatpay Display";
  src: url("fonts/FoundersGroteskXCondensed-Bold.otf");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- COLOR: CORE ---------- */
  --fp-ink:            #111111;  /* Primary text / logo / UI strokes */
  --fp-ink-2:          #2A2622;  /* Headlines on cream */
  --fp-cream:          #F6F2EC;  /* Page background — "flatpay cream" */
  --fp-cream-2:        #EFE9DF;  /* Deeper cream / section dividers */
  --fp-white:          #FFFFFF;  /* Product tiles, cards */
  --fp-fog:            #E9E3DA;  /* Borders, dividers */
  --fp-mute:           #6B6158;  /* Muted body text, captions */
  --fp-mute-2:         #8F867C;  /* Placeholder, disabled text */

  /* ---------- COLOR: BRAND ACCENTS ---------- */
  --fp-blue:           #0B2CF5;  /* Primary CTA, footer block */
  --fp-blue-dark:      #081FB0;  /* Hover / press */
  --fp-blue-tint:      #DDE3FD;  /* Blue-tinted backgrounds */
  --fp-lime:           #C9E3A7;  /* Product seamless — soft green */
  --fp-lime-soft:      #E8F1D7;  /* Mint cream — industry tile backdrop */
  --fp-peach:          #F4C6A1;  /* Warm peach — illustration accent */
  --fp-peach-soft:     #FBE6D4;  /* Soft peach — tile backdrop */

  /* ---------- COLOR: SEMANTIC ---------- */
  --fp-success:        #1F8F3E;
  --fp-warn:           #C38500;
  --fp-danger:         #C8301A;
  --fp-info:           var(--fp-blue);

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1:              var(--fp-ink);
  --fg-2:              var(--fp-mute);
  --fg-3:              var(--fp-mute-2);
  --fg-invert:         var(--fp-white);
  --bg-1:              var(--fp-cream);
  --bg-2:              var(--fp-white);
  --bg-3:              var(--fp-cream-2);
  --bg-accent:         var(--fp-blue);
  --border-1:          var(--fp-fog);
  --link:              var(--fp-ink);
  --link-hover:        var(--fp-blue);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:         "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:      "Flatpay Display", "Founders Grotesk X-Condensed", "Inter Tight", Impact, "Arial Narrow", sans-serif;
  /* No serif / no mono in marketing */

  --fw-regular:        400;
  --fw-medium:         500;
  --fw-bold:           700;

  /* Marketing-grade display scale — bold, big, negative tracking */
  --fs-hero:           clamp(64px, 10vw, 176px);
  --fs-display:        clamp(48px, 6.5vw, 96px);
  --fs-h1:             clamp(40px, 4.5vw, 72px);
  --fs-h2:             clamp(32px, 3.2vw, 52px);
  --fs-h3:             28px;
  --fs-h4:             22px;
  --fs-body-lg:        20px;
  --fs-body:           17px;
  --fs-body-sm:        15px;
  --fs-caption:        13px;
  --fs-eyebrow:        13px;

  --lh-display:        0.98;
  --lh-heading:        1.08;
  --lh-body:           1.55;
  --lh-tight:          1.2;

  --ls-display:        -0.025em;
  --ls-heading:        -0.015em;
  --ls-body:           -0.005em;
  --ls-eyebrow:        0.06em;

  /* ---------- SPACING (8-pt grid) ---------- */
  --sp-0:              0;
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              24px;
  --sp-6:              32px;
  --sp-7:              48px;
  --sp-8:              64px;
  --sp-9:              96px;
  --sp-10:             128px;

  /* ---------- RADII ---------- */
  --r-sm:              8px;
  --r-md:              12px;
  --r-lg:              20px;
  --r-xl:              28px;     /* default card */
  --r-2xl:             40px;     /* hero / feature card */
  --r-pill:            999px;    /* buttons, tags */

  /* ---------- SHADOWS (barely-there) ---------- */
  --shadow-none:       none;
  --shadow-xs:         0 1px 2px rgba(17,17,17,0.04);
  --shadow-sm:         0 4px 14px rgba(17,17,17,0.06);
  --shadow-md:         0 10px 30px rgba(17,17,17,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:          150ms;
  --dur-base:          220ms;
  --dur-slow:          380ms;

  /* ---------- LAYOUT ---------- */
  --container:         1240px;
  --container-narrow:  920px;
  --gutter:            clamp(20px, 4vw, 48px);
  --nav-h:             72px;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES — apply by tag, override per component.
   ========================================================================== */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .fp-h1 {
  font: var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h2, .fp-h2 {
  font: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h3, .fp-h3 {
  font: var(--fw-bold) var(--fs-h3)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0;
}

h4, .fp-h4 {
  font: var(--fw-medium) var(--fs-h4)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0;
}

p, .fp-p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.fp-display {
  font: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
}

.fp-hero {
  font: var(--fw-bold) var(--fs-hero)/var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
}

.fp-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: lowercase;
  color: var(--fg-1);
}

.fp-eyebrow--upper {
  text-transform: uppercase;
  color: var(--fg-2);
}

.fp-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-body);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

::selection { background: var(--fp-blue); color: var(--fp-white); }

/* ==========================================================================
   v31: DARK MODE — wird via [data-theme="dark"] aktiv
   Invertierte Cream-Palette, optimiert für nächtliches Arbeiten
   ========================================================================== */
:root[data-theme="dark"] {
  --fp-ink:            #F6F2EC;
  --fp-ink-2:          #E8E2D6;
  --fp-cream:          #14110D;
  --fp-cream-2:        #1E1A14;
  --fp-white:          #24201A;
  --fp-fog:            #3A352D;
  --fp-mute:           #A39C92;
  --fp-mute-2:         #807973;
  --fp-blue:           #6B85FF;
  --fp-blue-dark:      #4A66E8;
  --fp-blue-tint:      #1A2370;
  --fp-lime:           #8FB05F;
  --fp-lime-soft:      #2A3320;
  --fp-peach:          #C28A5C;
  --fp-peach-soft:     #3A2A1C;
  --fp-success:        #4ADE80;
  --fp-warn:           #FBBF24;
  --fp-danger:         #F87171;
  --fp-info:           var(--fp-blue);

  --fg-1:              var(--fp-ink);
  --fg-2:              var(--fp-mute);
  --fg-3:              var(--fp-mute-2);
  --bg-1:              var(--fp-cream);
  --bg-2:              var(--fp-white);
  --bg-3:              var(--fp-cream-2);
  --border-1:          var(--fp-fog);
}

/* Dark-Mode: extra fixes für Karten die im Light-Mode helle bg haben */
:root[data-theme="dark"] .tm.bad { background:#3A1F1B; }
:root[data-theme="dark"] .tm.warn { background:var(--fp-peach-soft); }
:root[data-theme="dark"] .tm.good { background:var(--fp-lime-soft); }
:root[data-theme="dark"] .tm.region { background:var(--fp-ink); color:var(--fp-cream); }
:root[data-theme="dark"] .tm.region .tm-r { color:var(--fp-cream); }
:root[data-theme="dark"] .bullet { background:rgba(246,242,236,.08); }
:root[data-theme="dark"] .bullet .zone-good { background:rgba(74,222,128,.10); }
:root[data-theme="dark"] .bullet .zone-warn { background:rgba(251,191,36,.10); }
:root[data-theme="dark"] .bk--ink { background:var(--fp-ink); color:var(--fp-cream); }
:root[data-theme="dark"] .bk--ink .num { color:var(--fp-cream); }
:root[data-theme="dark"] .bk--ink .lbl { color:rgba(246,242,236,.55); }
:root[data-theme="dark"] .bk--ink .cap { color:rgba(246,242,236,.7); }
:root[data-theme="dark"] .bk--ink .meter { background:rgba(246,242,236,.12); }
:root[data-theme="dark"] .bk--lime { background:var(--fp-lime-soft); }
:root[data-theme="dark"] .bk--peach { background:var(--fp-peach-soft); }
:root[data-theme="dark"] .status-card { background:var(--fp-ink); color:var(--fp-cream); }
:root[data-theme="dark"] .status-card .num { color:var(--fp-cream); }
:root[data-theme="dark"] .status-card .eyebrow { color:rgba(246,242,236,.55); }
:root[data-theme="dark"] .status-card .row { border-top-color:rgba(246,242,236,.12); color:rgba(246,242,236,.7); }
:root[data-theme="dark"] .status-card .row b { color:var(--fp-cream); }
:root[data-theme="dark"] .toggle button.on { background:var(--fp-ink); color:var(--fp-cream); }


/* v32: Dark-Mode Ink-Karten Override
   Im Dark-Mode war die Status-Card cream weil --fp-ink invertiert wurde.
   Wir zwingen die Ink-Akzent-Karten zurueck zu schwarz mit hellem Border. */
:root[data-theme="dark"] .status-card,
:root[data-theme="dark"] .bk--ink,
:root[data-theme="dark"] .tm.region {
  background:#0A0A0A !important;
  color:#F6F2EC !important;
  border:1px solid #2A2622 !important;
}
:root[data-theme="dark"] .status-card .num,
:root[data-theme="dark"] .bk--ink .num,
:root[data-theme="dark"] .tm.region .tm-r {
  color:#F6F2EC !important;
}
:root[data-theme="dark"] .status-card .body,
:root[data-theme="dark"] .status-card .row,
:root[data-theme="dark"] .bk--ink .cap,
:root[data-theme="dark"] .tm.region .tm-meta {
  color:rgba(246,242,236,.7) !important;
}
:root[data-theme="dark"] .bk--ink .lbl,
:root[data-theme="dark"] .tm.region .pos {
  color:rgba(246,242,236,.55) !important;
}
:root[data-theme="dark"] .bk--ink .meter {
  background:rgba(246,242,236,.12) !important;
}
:root[data-theme="dark"] .status-card .row {
  border-top:1px solid rgba(246,242,236,.12) !important;
}
:root[data-theme="dark"] .status-card .row b,
:root[data-theme="dark"] .tm.region .tm-meta b {
  color:#F6F2EC !important;
}
:root[data-theme="dark"] .bk--ink .num small {
  color:rgba(246,242,236,.5) !important;
}
:root[data-theme="dark"] .tm.region .pc {
  color:rgba(246,242,236,.5) !important;
}