/* ====================================================================
   2ENDLEGAL — colors & type
   Source: 2ENDLEGAL Brand Identity Manual (księga identyfikacji)
   designed by Weronika Cyganik · veronikacyganik@gmail.com
   ==================================================================== */

/* --- Webfont: brand font --------------------------------------------
   The brandbook originally references N27 (Atipo Foundry); the brand has
   since shipped Latinotype Biennale as its working font. Only the Light
   weight has been provided so far — we declare it as the brand family
   and fall back to Space Grotesk (Google Fonts) for weights we don't
   have yet, so heavier weights still render reasonably.
   FLAG: only Biennale Light is bundled. Add Regular / Medium / Bold
   files into fonts/ when available and add corresponding @font-face
   blocks below.
-------------------------------------------------------------------- */
@font-face {
  font-family: 'Biennale';
  src: url('../fonts/Latinotype-Biennale-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Biennale';
  src: url('../fonts/Latinotype-Biennale-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ============ COLOR TOKENS ============ */

  /* Brand palette (exactly as defined in section 2.1) */
  --color-black:        #1e1e1e;   /* 2ENDLEGAL BLACK   · CMYK 0/0/0/100 · Pantone Black C/U */
  --color-white:        #ffffff;   /* 2ENDLEGAL WHITE   · CMYK 0/0/0/0 */
  --color-steel-grey:   #dcdcdc;   /* 2ENDLEGAL STEEL GREY · CMYK 0/0/0/20 · Pantone Cool Gray 1 C/U */
  --color-vibrant-green:#dcfa64;   /* 2ENDLEGAL VIBRANT GREEN · CMYK 30/0/80/0 · Pantone 374 C/U */
  --color-vibrant-green-ink:#4d6b00; /* darkened vibrant green — legible as text/accent on white */

  /* Neutral scale derived between black and steel-grey for UI work */
  --color-ink-900:      #1e1e1e;
  --color-ink-700:      #3d3d3d;
  --color-ink-500:      #6e6e6e;
  --color-ink-300:      #b8b8b8;
  --color-ink-200:      #dcdcdc;
  --color-ink-100:      #ececec;
  --color-ink-50:       #f6f6f6;

  /* Green — only the brand green is canonical, but for tints in UI */
  --color-green-600:    #b8d654;   /* darker variant for hover states */
  --color-green-500:    #dcfa64;   /* THE brand green */
  --color-green-100:    #f4fcd0;   /* very pale wash, e.g. for highlight strips */

  /* Semantic — foregrounds */
  --fg-1: var(--color-black);              /* primary text on light */
  --fg-2: var(--color-ink-700);            /* secondary text */
  --fg-3: var(--color-ink-500);            /* tertiary / labels */
  --fg-on-dark: var(--color-white);        /* text on dark surfaces */
  --fg-on-green: var(--color-black);       /* per brandbook 1.11: black type on green plate */

  /* Semantic — backgrounds */
  --bg-1: var(--color-white);
  --bg-2: var(--color-ink-50);
  --bg-3: var(--color-steel-grey);
  --bg-dark: var(--color-black);
  --bg-accent: var(--color-vibrant-green);

  /* Borders / lines (key visual: linear elements / lines are part of the system) */
  --line-strong: var(--color-black);
  --line-weak:   var(--color-steel-grey);
  --line-hairline: rgba(30, 30, 30, 0.12);

  /* The brand gradient — vibrant-green fading into transparent.
     Per 4.2: the green can "tint" a composition, photo or typography
     as a fading gradient. Never combine with grey/black plates;
     never fill the entire composition. */
  --grad-green-fade: linear-gradient(
    135deg,
    var(--color-vibrant-green) 0%,
    rgba(220, 250, 100, 0.0) 70%
  );
  --grad-green-fade-vertical: linear-gradient(
    180deg,
    var(--color-vibrant-green) 0%,
    rgba(220, 250, 100, 0.0) 100%
  );

  /* ============ TYPOGRAPHY TOKENS ============ */
  --font-display: 'Biennale', 'Space Grotesk', 'N27', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Biennale', 'Space Grotesk', 'N27', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Weight scale — brandbook recommends Regular for headings + body,
     Light for long copy, Bold for emphasis. */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* Type scale (10px base * modular). Tight tracking matches N27. */
  --fs-display:   clamp(56px, 9vw, 144px);
  --fs-h1:        clamp(40px, 6vw, 72px);
  --fs-h2:        clamp(32px, 4vw, 48px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  --fs-superscript: 0.55em; /* per 4.7 — superscript is a key brand detail */

  /* Line heights — short and tight on display, comfortable on body */
  --lh-display: 0.92;
  --lh-heading: 1.05;
  --lh-body: 1.5;
  --lh-tight: 1.15;

  /* Letter spacing — N27 logo is set tight */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-eyebrow: 0.04em;  /* used on small caps eyebrows like "01 nowe technologie" */

  /* ============ SPACING (8-pt base, 4-pt half-step) ============ */
  --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 — brand is RECTILINEAR. Almost no rounding. ============ */
  --radius-0: 0;        /* default — flat rectangles, like the green logo plate */
  --radius-1: 2px;      /* hairline rounding for inputs only */
  --radius-pill: 999px; /* used very sparingly, e.g. on chip pills */

  /* ============ SHADOWS — brand is FLAT. Use with restraint. ============ */
  --shadow-none: none;
  --shadow-card: 0 1px 0 rgba(30,30,30,0.06), 0 8px 24px rgba(30,30,30,0.06);
  --shadow-lift: 0 12px 40px rgba(30,30,30,0.12);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ====================================================================
   Semantic element styles — drop colors_and_type.css and you get this
   typography system for free.
   ==================================================================== */

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

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--w-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  margin: 0;
}
p { margin: 0 0 var(--sp-4) 0; max-width: 65ch; }
small, .small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* The display style — used for "2ENDLEGAL" oversized logo treatments
   and big composition headlines (composition type 02 in 4.6) */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Eyebrow / numbered label — the "01 nowe technologie" pattern from 4.7.
   Index numbers are set as superscript, anchored to the baseline. */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-eyebrow);
}
.eyebrow .index,
sup.index {
  font-size: var(--fs-superscript);
  vertical-align: super;
  margin-right: 0.25em;
  font-feature-settings: 'sups' on;
}

/* Inline highlight — green plate behind a single word (per 4.3) */
.highlight {
  background: var(--color-vibrant-green);
  color: var(--color-black);
  padding: 0 0.15em;
  /* Brand is rectilinear — NO radius on this plate. */
}

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

/* Buttons — flat, rectangular. The brand is austere; use sparingly. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-medium);
  line-height: 1;
  padding: 14px 22px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-0);
  background: var(--color-black);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color    var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:hover { background: var(--color-vibrant-green); color: var(--color-black); border-color: var(--color-vibrant-green); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-black); }
.btn--ghost:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.btn--green { background: var(--color-vibrant-green); color: var(--color-black); border-color: var(--color-vibrant-green); }
.btn--green:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }