/* ============================================================
 * LAMPKA PERFORMANCE — Foundations
 * Source: Lampka_ksiega_znaku.pdf (brand book v1.00 / 2026)
 * + Lampka_Template_v01.pptx theme1.xml extensions
 * ------------------------------------------------------------
 * Logo font:      Cal Sans (Google Fonts) — logo only
 * Material font:  Poppins  (Google Fonts) — everything else
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Poppins:wght@300;400;500;600;700;900&display=swap');

:root {
  /* ---------- BRAND COLORS (księga znaku §02) ---------- */
  /* Black — base of identity. Profesjonalizm, stabilność, ekspert. */
  --lampka-black:        #000000;     /* Pantone Black C / CMYK 0 0 0 100 */
  --lampka-black-90:     #1A1A1A;
  --lampka-black-80:     #333333;
  --lampka-black-70:     #4D4D4D;
  --lampka-black-60:     #666666;
  --lampka-black-50:     #808080;
  --lampka-black-40:     #999999;
  --lampka-black-30:     #B3B3B3;
  --lampka-black-20:     #CCCCCC;
  --lampka-black-10:     #E6E6E6;

  /* Yellow — accent. Moment "zapalenia lampki". */
  --lampka-yellow:       #EFD500;     /* Pantone 115 C / CMYK 10 10 100 0 */
  --lampka-yellow-90:    #F1D919;
  --lampka-yellow-80:    #F2DD33;
  --lampka-yellow-70:    #F4E14D;
  --lampka-yellow-60:    #F5E566;
  --lampka-yellow-50:    #F7EA80;
  --lampka-yellow-40:    #F9EE99;
  --lampka-yellow-30:    #FAF2B3;
  --lampka-yellow-20:    #FCF6CC;
  --lampka-yellow-10:    #FDFAE6;

  /* Warm extended accents (from pptx theme — used sparingly on charts/buttons) */
  --lampka-amber:        #FDC100;
  --lampka-orange:       #F39200;
  --lampka-orange-deep:  #ED6B06;     /* CTA hover / secondary button */
  --lampka-red-orange:   #E94E1B;
  --lampka-red:          #CE0B10;     /* "where money burns" — danger / warning */

  /* Neutrals (off-blacks/whites for materials — not in księga, derived) */
  --lampka-paper:        #FFFFFF;
  --lampka-paper-warm:   #FAF8F2;     /* subtle warm paper for light surfaces */
  --lampka-ink-soft:     #29261B;     /* near-black with warm undertone */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:                  var(--lampka-black);
  --bg-alt:              var(--lampka-black-90);
  --bg-card:             #141414;
  --bg-inverse:          var(--lampka-paper);

  --fg-1:                var(--lampka-paper);                 /* primary on dark */
  --fg-2:                rgba(255,255,255,0.72);              /* secondary on dark */
  --fg-3:                rgba(255,255,255,0.48);              /* tertiary on dark */
  --fg-on-light-1:       var(--lampka-black);
  --fg-on-light-2:       var(--lampka-black-70);
  --fg-on-light-3:       var(--lampka-black-50);

  --accent:              var(--lampka-yellow);
  --accent-fg:           var(--lampka-black);                 /* text on yellow */
  --cta:                 var(--lampka-orange);                /* template uses orange CTA */
  --cta-hover:           var(--lampka-orange-deep);
  --cta-fg:              var(--lampka-paper);
  --danger:              var(--lampka-red);                   /* "where money burns" */

  --border-dark:         rgba(255,255,255,0.10);
  --border-light:        rgba(0,0,0,0.10);
  --divider:             rgba(255,255,255,0.06);

  /* ---------- TYPE FAMILIES ---------- */
  --font-logo:           'Cal Sans', 'Poppins', system-ui, sans-serif;
  --font-display:        'Poppins', system-ui, -apple-system, sans-serif; /* Black 900 */
  --font-body:           'Poppins', system-ui, -apple-system, sans-serif; /* 300/400/500 */
  --font-mono:           ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Display uses Poppins Black 900, tight tracking. Body Poppins 300/400. */
  --fs-hero:     clamp(48px, 7.5vw, 96px);   /* H1 landing */
  --fs-h1:       clamp(40px, 5vw, 72px);     /* slide titles */
  --fs-h2:       clamp(32px, 3.6vw, 48px);
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-lead:     20px;                       /* sub headlines */
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-eyebrow:  13px;                       /* uppercase tracked label */

  --lh-tight:    1.02;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --ls-tight:    -0.02em;
  --ls-display:  -0.025em;
  --ls-eyebrow:  0.16em;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADII ---------- */
  /* Brand is geometric/sharp. Cards use small radius; buttons capsule. */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-1:        1px;
  --bw-2:        2px;
  --bw-3:        3px;     /* heavy borders, brand uses thick lines */

  /* ---------- ELEVATION ---------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 6px 18px rgba(0,0,0,0.28);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 4px rgba(239,213,0,0.25);  /* yellow focus ring */

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container-max:   1280px;
  --container-pad:   clamp(20px, 4vw, 64px);
  --slide-w:         1920px;
  --slide-h:         1080px;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES
 * Use these directly, or apply via class for the same effect.
 * ============================================================ */

html, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
.hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
p {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
small, .small { font-size: var(--fs-sm); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.mono { font-family: var(--font-mono); }

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

/* Yellow highlight strip — signature brand treatment.
   "Bez korpo mowy" — punches a word out of a sentence. */
.highlight {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.05em 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Strike-through "what doesn't work" — common brand rhetorical move. */
.strike {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 3px;
  color: var(--fg-3);
}