/* ==========================================================================
   CXLABS Design System - Colors & Typography
   ==========================================================================

   Sources:
   - CXLABS.fig (Website-Design-ENG). Colors lifted from METADATA.md usage counts.
   - Fonts: Clash Display (headings, pełne PL) + Nunito Sans (body, pełne PL).
     Avenir wycofany - lokalny Avenir-Light.ttf nie zawierał polskich diakrytyków,
     przez co spadały na font zastępczy i wizualnie „skakały".
*/

/* ---------- Body webfont: Nunito Sans (pełne pokrycie polskich znaków) ----------
   MUSI być przed @font-face - przeglądarki ignorują @import po innych regułach. */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap");

/* ---------- Webfonts (local) ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Uwaga: lokalny Avenir-Light.ttf zawiera tylko część polskich znaków (brak ą,ć,ę,ń,ś,ź,ż),
   przez co diakrytyki spadały na font zastępczy i „skakały". Tekst korzysta więc
   z kompletnego Nunito Sans (ładowanego powyżej przez @import). */

:root {
  /* ---------- Brand Colors ---------- */
  /* Ink - near-black forest */
  --cx-ink: rgb(18, 32, 33);           /* primary text on light */
  --cx-ink-80: rgb(36, 56, 56);        /* surface dark (hero/footer) */
  --cx-ink-60: rgb(48, 85, 85);        /* divider on dark */
  --cx-ink-40: rgb(112, 156, 154);     /* muted teal on dark */
  --cx-ink-20: rgb(139, 189, 184);     /* accent teal */
  --cx-ink-10: rgb(73, 131, 129);      /* link/accent teal */
  --cx-ink-surface: rgb(48, 68, 69);   /* subtle surface on dark */

  /* Lime - signature accent */
  --cx-lime: rgb(173, 247, 99);
  --cx-lime-soft: rgb(219, 236, 233);

  /* Off-whites & mists */
  --cx-white: rgb(255, 255, 255);
  --cx-mist: rgb(244, 249, 248);       /* pale mint page bg */
  --cx-paper: rgb(246, 247, 248);      /* chip bg, menu item hover */
  --cx-cloud: rgb(234, 235, 237);      /* border light */
  --cx-cloud-2: rgb(220, 222, 225);    /* border stronger */
  --cx-cloud-3: rgb(230, 233, 239);    /* border subtle */
  --cx-cloud-4: rgb(239, 239, 239);    /* border hairline */

  /* Grays - neutral text */
  --cx-gray-1: rgb(50, 51, 56);
  --cx-gray-2: rgb(97, 98, 107);
  --cx-gray-3: rgb(146, 150, 159);

  /* Accents used sparingly - mostly in monday.com product context */
  --cx-violet: rgb(135, 89, 249);
  --cx-indigo: rgb(129, 129, 255);
  --cx-green: rgb(0, 202, 114);
  --cx-yellow: rgb(255, 204, 0);
  --cx-black: rgb(0, 0, 0);

  /* ---------- Semantic tokens ---------- */
  --fg: var(--cx-ink);
  --fg-muted: var(--cx-gray-2);
  --fg-subtle: var(--cx-gray-3);
  --fg-on-dark: var(--cx-mist);
  --fg-on-dark-muted: var(--cx-lime-soft);
  --fg-on-dark-subtle: var(--cx-ink-40);

  --bg: var(--cx-white);
  --bg-alt: var(--cx-mist);
  --bg-chip: var(--cx-paper);
  --bg-dark: var(--cx-ink-80);
  --bg-darker: var(--cx-ink);

  --accent: var(--cx-lime);
  --accent-ink: var(--cx-ink);

  --border: var(--cx-cloud-2);
  --border-subtle: var(--cx-cloud);
  --border-dark: var(--cx-ink-60);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ---------- Spacing scale (8pt base) ---------- */
  --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: 80px;
  --space-10: 112px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.10);

  /* ---------- Typography families ---------- */
  --font-display: "Clash Display", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-hero: 56px;
  --fs-display: 80px;
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
}

/* ---------- Element defaults ---------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .cx-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p, .cx-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.cx-small { font-size: var(--fs-small); }
.cx-xs { font-size: var(--fs-xs); }

/* Section eyebrow - small teal label with double-chevron */
.cx-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--cx-ink-40);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cx-eyebrow--on-light { color: var(--cx-ink-10); }
.cx-eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'><path d='M7 6.5 L0 0 L2.5 0 L9 6.5 L2.5 13 L0 13 Z M14 6.5 L7 0 L9.5 0 L16 6.5 L9.5 13 L7 13 Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'><path d='M7 6.5 L0 0 L2.5 0 L9 6.5 L2.5 13 L0 13 Z M14 6.5 L7 0 L9.5 0 L16 6.5 L9.5 13 L7 13 Z'/></svg>") no-repeat center / contain;
}

/* Primary button - lime with dark trailing chevron plate */
.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  height: 48px;
  padding: 4px 4px 4px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
  text-decoration: none;
}
.cx-btn:hover { filter: brightness(0.96); }
.cx-btn:active { transform: translateY(1px); }
.cx-btn__chev {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--cx-ink);
  color: var(--cx-lime);
  display: inline-flex; align-items: center; justify-content: center;
}
.cx-btn--secondary {
  background: rgba(18, 32, 33, 0.05);
  border-color: rgba(18, 32, 33, 0.05);
  padding: 12px 24px;
  gap: 8px;
}
.cx-btn--dark {
  background: var(--cx-ink);
  color: var(--cx-mist);
}
.cx-btn--dark .cx-btn__chev { background: var(--cx-lime); color: var(--cx-ink); }
.cx-btn--ghost-on-dark {
  background: transparent;
  color: var(--cx-mist);
  border-color: var(--cx-ink-60);
  padding: 12px 24px;
  gap: 8px;
}

/* Eyebrow chevrons helper */
.cx-chev {
  width: 16px; height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'><path d='M7 6.5 L0 0 L2.5 0 L9 6.5 L2.5 13 L0 13 Z M14 6.5 L7 0 L9.5 0 L16 6.5 L9.5 13 L7 13 Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'><path d='M7 6.5 L0 0 L2.5 0 L9 6.5 L2.5 13 L0 13 Z M14 6.5 L7 0 L9.5 0 L16 6.5 L9.5 13 L7 13 Z'/></svg>") no-repeat center / contain;
  display: inline-block;
}

/* Card defaults */
.cx-card {
  border-radius: var(--radius-lg);
  background: var(--cx-white);
  border: 1px solid var(--border-subtle);
  padding: 32px;
}
.cx-card--dark {
  background: var(--cx-ink-80);
  border-color: var(--cx-ink-60);
  color: var(--fg-on-dark);
}

/* Utility: background gradient for hero */
.cx-bg-hero {
  background: linear-gradient(180deg, var(--cx-ink-80) 0%, var(--cx-ink) 100%);
  color: var(--fg-on-dark);
}