/* ============================================================
   STAN BARAŃSKI — COLORS & TYPOGRAPHY
   Brand: Doktor od krypto / DeFi research, protocols, risk
   Source: uploads/Stan branding.pdf (v1.0 — 2026)
   ============================================================ */

/* --------- WEB FONTS ------------------------------------------------
   Source fonts called out in the brand book:
     • Telegraf  — display / headings (paid, Pangram Pangram Foundry)
     • Aileron   — body / captions   (free, dot colon)

   User direction (m0036): "technical modern fonts for headings and
   simple classic for normal text". The brand-book fonts (Telegraf /
   Aileron — geometric grotesque + humanist grotesque) don't match
   that brief, so we override:

     Display / headings →  JetBrains Mono   (technical, code-feel)
     Body / paragraphs  →  Source Serif 4   (simple, classic serif)
     Mono / code        →  JetBrains Mono   (same family, unified)

   This is a *deliberate* deviation from the brand-book type. Flag
   to the user before shipping to production — if they want to fall
   back to the brand-book pairing, restore the previous Space Grotesk
   + Inter substitution.
   ------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

:root {
  /* ====================================================
     COLORS — from §ZASADY UŻYCIA KOLORÓW
     ==================================================== */

  /* Primary palette */
  --stan-yellow:    #F7F102;  /* 01 — main accent, ~15% of surface */
  --stan-graphite:  #101010;  /* 02 — deep base, big areas        */
  --stan-gray:      #EAE9E8;  /* 03 — neutral, secondary text     */
  --stan-white:     #FBF8F9;  /* 04a — light text on dark / clean */
  --stan-black:     #201F1F;  /* 04b — text on light / alt base   */

  /* Extended utility — derived, used in components */
  --stan-graphite-2:#1A1A1A;  /* slightly lifted graphite for cards on graphite */
  --stan-graphite-3:#2A2A2A;  /* borders / dividers on dark        */
  --stan-gray-2:    #C0C0C0;  /* caption gray (called out in brand book) */
  --stan-gray-3:    #8A8A8A;  /* tertiary text */
  --stan-yellow-2:  #FFF566;  /* yellow tint for hover on dark */
  --stan-yellow-3:  #C9C406;  /* yellow press / pressed accent */

  /* Semantic — neutral system */
  --bg:             var(--stan-white);
  --bg-elevated:    #FFFFFF;
  --bg-inverse:     var(--stan-graphite);
  --surface:        var(--stan-gray);
  --surface-2:      #F2F1EF;
  --border:         #DAD8D6;
  --border-strong:  var(--stan-black);

  --fg:             var(--stan-black);
  --fg-2:           #4A4948;     /* secondary text on light */
  --fg-3:           var(--stan-gray-3);
  --fg-inverse:     var(--stan-white);
  --fg-inverse-2:   var(--stan-gray-2);

  --accent:         var(--stan-yellow);
  --on-accent:      var(--stan-black);

  /* Semantic — status (derived, not in brand book — flagged) */
  --danger:         #E5484D;
  --success:        #2EAE63;
  --info:           #5B8DEF;

  /* ====================================================
     TYPOGRAPHY — overridden per user direction (m0036 + m0040)
     Headings: technical modern (mono — JetBrains Mono).
     Body:     simple sans — Inter.
     ==================================================== */
  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px) */
  --fs-display:   80px;
  --fs-h1:        52px;
  --fs-h2:        38px;
  --fs-h3:        26px;
  --fs-h4:        19px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-micro:     10px;

  /* Line heights */
  --lh-display:   1.00;
  --lh-heading:   1.10;
  --lh-body:      1.5;
  --lh-tight:     1.25;

  /* Letter-spacing */
  --ls-display:   -0.03em;
  --ls-heading:   -0.02em;
  --ls-body:      0;
  --ls-caption:   0.02em;
  --ls-eyebrow:   0.18em;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ====================================================
     RADII — squared but humane, matches brand cards
     ==================================================== */
  --r-0:    0px;
  --r-1:    4px;     /* micro / inline tags                */
  --r-2:    10px;    /* small chips                        */
  --r-3:    16px;    /* small cards, asterisk badge        */
  --r-4:    24px;    /* big cards (the "0X" tiles)         */
  --r-pill: 999px;   /* pills, capsule buttons             */

  /* ====================================================
     SPACING — 4px base, dense for technical layouts
     ==================================================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* ====================================================
     SHADOWS — used sparingly; brand favors flat + borders
     ==================================================== */
  --shadow-1: 0 1px 2px rgba(16,16,16,0.06), 0 0 0 1px rgba(16,16,16,0.04);
  --shadow-2: 0 4px 16px rgba(16,16,16,0.08), 0 0 0 1px rgba(16,16,16,0.04);
  --shadow-3: 0 24px 48px -12px rgba(16,16,16,0.18);

  /* Yellow accent ring (e.g. focused inputs, key callouts) */
  --ring-accent: 0 0 0 3px rgba(247,241,2,0.45);
  --ring-focus:  0 0 0 3px rgba(16,16,16,0.18);

  /* ====================================================
     PROPORCJE / USAGE RATIOS (informational, brand book)
     ==================================================== */
  --ratio-base:    60%;  /* graphite + black */
  --ratio-neutral: 25%;  /* gray + white */
  --ratio-accent:  15%;  /* yellow */
}

/* ====================================================
   SEMANTIC TYPE STYLES
   ==================================================== */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  margin: 0;
}
h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--fg-3); letter-spacing: var(--ls-caption); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}
pre.code {
  font-family: var(--font-mono);
  background: var(--stan-graphite);
  color: var(--stan-white);
  padding: var(--s-5);
  border-radius: var(--r-3);
  overflow-x: auto;
  line-height: 1.55;
}

/* Inline accents used across the brand */
.highlight-yellow {
  background: var(--stan-yellow);
  color: var(--stan-black);
  padding: 0.05em 0.25em;
  border-radius: var(--r-1);
}
.text-yellow { color: var(--stan-yellow); }
.text-graphite { color: var(--stan-graphite); }
.text-muted { color: var(--fg-2); }

/* Dark mode flip — brand book explicitly defines this dual baseline */
.theme-dark, [data-theme="dark"] {
  --bg: var(--stan-graphite);
  --bg-elevated: var(--stan-graphite-2);
  --bg-inverse: var(--stan-white);
  --surface: var(--stan-graphite-2);
  --surface-2: var(--stan-graphite-3);
  --border: var(--stan-graphite-3);
  --border-strong: var(--stan-white);
  --fg: var(--stan-white);
  --fg-2: var(--stan-gray-2);
  --fg-3: var(--stan-gray-3);
  --fg-inverse: var(--stan-black);
  --fg-inverse-2: var(--fg-2);
  color: var(--fg);
  background: var(--bg);
}