/* =====================================================================
 * e-korepetycje.net — Design Tokens (UX-first, pre-rebrand)
 * ---------------------------------------------------------------------
 * The brand color (green) is the only fixed element from the existing
 * site; the rest is a neutral, accessible UX foundation that should
 * survive the upcoming rebrand. Treat this as a working baseline —
 * use semantic tokens (--text-primary, --bg-surface, etc.), not raw
 * palette values, in product code so a rebrand is a one-file change.
 * ===================================================================== */

/* Webfonts — Google Fonts substitute for body/UI.
   FLAGGED SUBSTITUTION: brand font is the Myriad family (Adobe), which
   is not freely available on the web. We substitute "Source Sans 3" —
   Adobe's own open-source humanist sans, the closest published match
   to Myriad in proportions and x-height. Replace once licensed Myriad
   webfont files (or a definitive Adobe Fonts kit) are supplied. */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ----------------------------- BRAND ------------------------------ */
  /* Pulled from the existing logo SVG: rgb(45,185,148). */
  --brand-500: #2db994;
  --brand-600: #25a282;          /* hover */
  --brand-700: #1d8a6e;          /* press / strong */
  --brand-400: #5ccdb0;          /* highlight */
  --brand-200: #b5ebdd;          /* subtle bg */
  --brand-100: #d8f4ec;          /* tag bg */
  --brand-50:  #ecfaf5;          /* page tint */

  /* --------------------------- NEUTRALS ----------------------------- */
  /* Cool-warm gray scale, close to neutral. Tuned for AA on white. */
  --gray-950: #0e1413;
  --gray-900: #161e1c;
  --gray-800: #232c2a;
  --gray-700: #3a4543;
  --gray-600: #5a6664;
  --gray-500: #7c8886;
  --gray-400: #a3adab;
  --gray-300: #c8d0ce;
  --gray-200: #e2e7e5;
  --gray-100: #eef1f0;
  --gray-50:  #f6f8f7;
  --white:    #ffffff;

  /* --------------------------- SEMANTIC ----------------------------- */
  --success-500: #2db994;        /* same as brand — success is "on" */
  --success-100: #d8f4ec;
  --warning-500: #d98a1c;        /* warm amber, not yellow (a11y) */
  --warning-100: #fbe8c9;
  --danger-500:  #d24a4a;
  --danger-100:  #f8dada;
  --info-500:    #2c7be0;
  --info-100:    #d6e6fb;

  /* ---------------------- SEMANTIC SURFACES ------------------------- */
  --bg-page:        var(--gray-50);
  --bg-surface:     var(--white);
  --bg-surface-2:   var(--gray-100);   /* recessed */
  --bg-inverse:     var(--gray-900);

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-on-brand:  var(--white);
  --text-on-inverse:var(--gray-100);
  --text-link:      var(--brand-700);
  --text-link-hover:var(--brand-600);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-focus:   var(--brand-500);

  /* ------------------------- TYPOGRAPHY ----------------------------- */
  --font-sans:    "Myriad Pro", "Myriad", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.125 minor third, anchored at 16px body. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

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

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* --------------------------- SPACING ------------------------------ */
  /* 4px base. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --------------------------- RADII -------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* --------------------------- SHADOWS ------------------------------ */
  /* Soft, low-opacity. Avoid heavy shadows — UX-driven, not flashy. */
  --shadow-xs: 0 1px 2px rgba(14, 20, 19, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 20, 19, 0.06), 0 1px 2px rgba(14, 20, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 20, 19, 0.08), 0 2px 4px rgba(14, 20, 19, 0.04);
  --shadow-lg: 0 12px 28px rgba(14, 20, 19, 0.10), 0 4px 8px rgba(14, 20, 19, 0.04);
  --shadow-xl: 0 24px 48px rgba(14, 20, 19, 0.14), 0 8px 16px rgba(14, 20, 19, 0.06);
  --shadow-focus: 0 0 0 3px rgba(45, 185, 148, 0.30);

  /* --------------------------- LAYOUT ------------------------------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-max:    1440px;

  /* ----------------------- MOTION / EASING -------------------------- */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* =====================================================================
 * SEMANTIC TYPE STYLES
 * Use these classes (or the underlying CSS vars) instead of raw sizes.
 * ===================================================================== */


/* ============================================================
 * KONIEC. Ten plik zawiera WYLACZNIE zmienne.
 *
 * payment_checkout_tokens.css ma dalej reguly na html, body, naglowki
 * oraz na a (text-decoration: underline) — pisane pod jeden, izolowany
 * widok checkoutu. Wciagniete globalnie na listing zmienialy rozmiar pisma
 * i podkreslaly wszystkie linki, lacznie z menu w naglowku serwisu.
 *
 * Jesli potrzebujesz tokenow na kolejnej podstronie — laduj TEN plik,
 * nie tamten.
 * ============================================================ */