/* ==========================================================================
   technolutions.pl — Design Tokens
   Generated from Figma "Fundations" + "Colors" variable collections.
   Sharp-corner design (radius 0), Fira Sans typeface.
   ========================================================================== */

:root {
  /* ---------- Color: Brand (orange) ---------- */
  --c-brand-50: #fff8ed;
  --c-brand-100: #ffefd6;
  --c-brand-200: #fedcae;
  --c-brand-300: #fdbf7d;
  --c-brand-400: #fb9d49;
  --c-brand-500: #f7941d; /* primary */
  --c-brand-600: #ea790e;
  --c-brand-700: #c25d09;
  --c-brand-800: #9c490f;
  --c-brand-900: #7d3d11;
  --c-brand-950: #441e05;

  /* ---------- Color: Natural (grey ramp) ---------- */
  --c-natural-50: #f9f9fa;
  --c-natural-100: #f1f1f3;
  --c-natural-200: #e4e4e7;
  --c-natural-300: #d1d1d6;
  --c-natural-400: #a1a1aa;
  --c-natural-500: #838282; /* primary grey */
  --c-natural-600: #52525b;
  --c-natural-700: #3f3f46;
  --c-natural-800: #27272a;
  --c-natural-900: #18181b;

  /* ---------- Color: Purple ---------- */
  --c-purple-50: #fbf5fe;
  --c-purple-100: #f3e6fc;
  --c-purple-200: #e6cdf9;
  --c-purple-300: #d4aef4;
  --c-purple-400: #bd86ec;
  --c-purple-500: #a360e2; /* primary */
  --c-purple-600: #7030a0;
  --c-purple-700: #7030a0;
  --c-purple-800: #56227a;
  --c-purple-900: #471d63;
  --c-purple-950: #2d0d42;

  /* ---------- Color: Blue ---------- */
  --c-blue-50: #eff6ff;
  --c-blue-100: #dbeafe;
  --c-blue-200: #bfdbfe;
  --c-blue-300: #93c5fd;
  --c-blue-400: #60a5fa;
  --c-blue-500: #3b82f6; /* primary */
  --c-blue-600: #0a54d6;
  --c-blue-700: #0946b3;
  --c-blue-800: #07378c;
  --c-blue-900: #0c2d68;
  --c-blue-950: #061838;

  /* ---------- Color: Semantic ---------- */
  --c-success: #00c950;
  --c-warning: #f0b100;
  --c-error: #fb2c36;
  --c-info: #00a6f4;

  /* ---------- Color: White / Black alpha ---------- */
  --c-white: #ffffff;
  --c-white-90: rgba(255, 255, 255, 0.9);
  --c-white-80: rgba(255, 255, 255, 0.8);
  --c-white-70: rgba(255, 255, 255, 0.7);
  --c-white-60: rgba(255, 255, 255, 0.6);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-40: rgba(255, 255, 255, 0.4);
  --c-white-20: rgba(255, 255, 255, 0.2);
  --c-white-10: rgba(255, 255, 255, 0.1);
  --c-white-5: rgba(255, 255, 255, 0.05);

  --c-black: #000000;
  --c-black-90: rgba(0, 0, 0, 0.9);
  --c-black-80: rgba(0, 0, 0, 0.8);
  --c-black-70: rgba(0, 0, 0, 0.7);
  --c-black-60: rgba(0, 0, 0, 0.6);
  --c-black-50: rgba(0, 0, 0, 0.5);
  --c-black-40: rgba(0, 0, 0, 0.4);
  --c-black-20: rgba(0, 0, 0, 0.2);
  --c-black-10: rgba(0, 0, 0, 0.1);
  --c-black-5: rgba(0, 0, 0, 0.05);

  /* ---------- Semantic surface aliases ---------- */
  --bg-page: var(--c-white);
  --bg-dark: var(--c-natural-900);
  --bg-muted: var(--c-natural-50);
  --text-strong: var(--c-natural-900);
  --text-body: var(--c-natural-600);
  --text-muted: var(--c-natural-500);
  --text-on-dark: var(--c-white);
  --border-subtle: var(--c-natural-200);

  /* ---------- Typography ---------- */
  --font-heading: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font sizes — desktop defaults (responsive overrides below) */
  --fs-h1: 60px;
  --fs-h2: 42px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-overline: 14px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-btn-l: 16px;
  --fs-btn-m: 16px;
  --fs-btn-s: 14px;
  --fs-link-l: 30px;
  --fs-link-m: 24px;
  --fs-link-s: 18px;

  /* Font weights (Fira Sans) */
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* ---------- Layout width system ---------- */
  --layout-full: 1480px;          /* full-bleed: mega-menu, footer */
  --layout-container: 1280px;    /* standard section container */
  --layout-content: 800px;       /* prose / text-wrap max */
  --layout-narrow: 592px;        /* intro / lead blocks */
  --layout-card: 520px;          /* CTA boxes, small components */

  /* ---------- Spacing (desktop) ---------- */
  --sp-section-pad: 64px;
  --sp-section-gap: 64px;
  --sp-container-pad: 16px;
  --sp-container-gap: 64px;
  --sp-container-max: 1280px;    /* calc-safe (px) — used in slider math */
  --sp-columns-gap: 112px;
  --sp-div-gap: 32px;
  --sp-textwrap-gap: 20px;
  --sp-textwrap-max: var(--layout-content);
  --sp-action-gap: 16px;

  /* Generic spacing scale */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-88: 88px;

  /* ---------- Radius ---------- */
  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --radius-xl: 64px;

  /* ---------- Letter spacing ---------- */
  --ls-tight: -1.5px;
  --ls-normal: 0.6px;
  --ls-wide: 1.2px;

  /* ---------- Line height (extended) ---------- */
  --lh-heading: 1.35;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.14);

  /* ---------- Layout ---------- */
  --navbar-h: 65px;
  --transition: 180ms ease;
}

/* ---------- Responsive token overrides (Tablet ≤ 1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    /* Layout widths → full-width on tablet */
    --layout-full: 100%;
    --layout-container: 100%;
    --layout-content: 100%;
    --layout-narrow: 100%;
    --layout-card: 100%;

    /* Typography — tablet (interpolated Desktop↔Mobile) */
    --fs-h1: 48px;
    --fs-h2: 34px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-overline: 13px;
    --fs-body-l: 17px;
    --fs-body-m: 15px;
    --fs-body-s: 13px;
    --fs-btn-l: 15px;
    --fs-btn-m: 15px;
    --fs-btn-s: 13px;
    --fs-link-l: 27px;
    --fs-link-m: 22px;
    --fs-link-s: 17px;

    /* Spacing — tablet (interpolated Desktop↔Mobile) */
    --sp-section-pad: 48px;
    --sp-section-gap: 72px;
    --sp-container-pad: 16px;
    --sp-container-gap: 48px;
    --sp-columns-gap: 64px;
    --sp-div-gap: 24px;
    --sp-textwrap-gap: 16px;
    --sp-textwrap-max: 100%;
    --sp-action-gap: 14px;
  }
}

/* ---------- Responsive token overrides (Small tablet / large phone ≤ 768px) ---------- */
@media (max-width: 768px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 30px;
    --fs-h3: 27px;
    --fs-h4: 21px;
    --sp-section-pad: 44px;
    --sp-section-gap: 56px;
    --sp-container-gap: 44px;
  }
}

/* ---------- Responsive token overrides (Mobile ≤ 560px) ---------- */
@media (max-width: 560px) {
  :root {
    /* Typography — mobile (exact Figma Variables values) */
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 26px;
    --fs-h4: 20px;
    --fs-overline: 12px;
    --fs-body-l: 16px;
    --fs-body-m: 14px;
    --fs-body-s: 12px;
    --fs-btn-l: 14px;
    --fs-btn-m: 14px;
    --fs-btn-s: 12px;
    --fs-link-l: 24px;
    --fs-link-m: 19px;
    --fs-link-s: 16px;

    /* Spacing — mobile (exact Figma Variables values) */
    --sp-section-pad: 40px;
    --sp-section-gap: 40px;
    --sp-container-pad: 16px;
    --sp-container-gap: 40px;
    --sp-container-max: 500px;
    --sp-columns-gap: 32px;
    --sp-div-gap: 20px;
    --sp-textwrap-gap: 12px;
    --sp-textwrap-max: 100%;
    --sp-action-gap: 12px;
  }
}