/* ============================================================
   PaczkaZabaw — Design tokens (consolidated)
   Colors · Typography · Spacing · Radii · Shadows · Base reset
   Fonts are loaded directly in the HTML <head> (preconnect + link)
   to avoid an @import waterfall.
   ============================================================ */

:root {
  /* ---- Brand: Pink (różowy) ---- */
  --pink-50:  #fff0f7;
  --pink-100: #ffd9eb;
  --pink-200: #ffb8d9;
  --pink-300: #ff95c4;
  --pink-400: #ff75af;   /* base — brand różowy */
  --pink-500: #f5559b;
  --pink-600: #db3f84;
  --pink-700: #b32d68;

  /* ---- Brand: Cyan (niebieski) ---- */
  --cyan-50:  #effbfc;
  --cyan-100: #d2f3f7;
  --cyan-200: #a8e7ee;
  --cyan-300: #7ed7e2;
  --cyan-400: #61c7d8;   /* base — brand niebieski */
  --cyan-500: #3aadc0;
  --cyan-600: #2b8e9f;
  --cyan-700: #226f7d;

  /* ---- Accent: Sunny yellow ---- */
  --yellow-100: #fff3cf;
  --yellow-200: #ffe79c;
  --yellow-300: #ffda6a;
  --yellow-400: #ffcb45;  /* base — słoneczny accent */
  --yellow-500: #f5b41f;

  /* ---- Support: Mint (positive / eco) ---- */
  --mint-100: #d8f6e8;
  --mint-300: #8fe3bf;
  --mint-400: #58cf9c;
  --mint-500: #2eb37c;

  /* ---- Support: Coral (alert / playful red) ---- */
  --coral-100: #ffe0dc;
  --coral-300: #ff9a91;
  --coral-400: #ff6b5e;
  --coral-500: #ec4a3c;

  /* ---- Neutrals: warm, plum-tinted ink ---- */
  --ink-900: #2c2747;
  --ink-800: #3d375b;
  --ink-700: #524b70;
  --ink-600: #6b6488;
  --ink-500: #8a83a3;
  --ink-400: #aaa3c0;
  --ink-300: #cbc6d9;
  --ink-200: #e6e3ee;
  --ink-100: #f2f0f7;

  --cream:   #fff8f3;
  --cream-deep: #fdeee2;
  --white:   #ffffff;
  --black:   #1d1930;

  /* Brand roles */
  --brand-primary:        var(--pink-400);
  --brand-primary-hover:  var(--pink-500);
  --brand-primary-press:  var(--pink-600);
  --brand-primary-deep:   var(--pink-700);
  --brand-primary-soft:   var(--pink-100);
  --brand-primary-tint:   var(--pink-50);

  --brand-secondary:        var(--cyan-400);
  --brand-secondary-hover:  var(--cyan-500);
  --brand-secondary-press:  var(--cyan-600);
  --brand-secondary-deep:   var(--cyan-700);
  --brand-secondary-soft:   var(--cyan-100);
  --brand-secondary-tint:   var(--cyan-50);

  --brand-accent:       var(--yellow-400);
  --brand-accent-deep:  var(--yellow-500);
  --brand-accent-soft:  var(--yellow-100);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-on-brand: #ffffff;
  --text-on-accent: var(--ink-900);
  --text-link:     var(--cyan-600);

  /* Surfaces */
  --surface-page:    var(--cream);
  --surface-card:    var(--white);
  --surface-sunken:  var(--cream-deep);
  --surface-soft:    var(--ink-100);
  --surface-invert:  var(--ink-900);

  /* Lines */
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--pink-200);

  /* Status */
  --success:      var(--mint-500);
  --success-soft: var(--mint-100);
  --warning:      var(--yellow-500);
  --warning-soft: var(--yellow-100);
  --danger:       var(--coral-500);
  --danger-soft:  var(--coral-100);
  --info:         var(--cyan-500);
  --info-soft:    var(--cyan-100);

  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--cyan-400) 45%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

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

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 5.25rem;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  --font-hero:     var(--fw-extra) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --font-h1:       var(--fw-extra) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --font-h2:       var(--fw-bold)  var(--text-3xl)/var(--leading-snug)  var(--font-display);
  --font-h3:       var(--fw-bold)  var(--text-2xl)/var(--leading-snug)  var(--font-display);
  --font-h4:       var(--fw-bold)  var(--text-xl)/var(--leading-snug)   var(--font-display);
  --font-body-lg:  var(--fw-regular) var(--text-lg)/var(--leading-normal) var(--font-body);
  --font-body-md:  var(--fw-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --font-body-sm:  var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --font-label:    var(--fw-bold) var(--text-xs)/1.2 var(--font-body);

  /* ---- Spacing ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --container-max: 1200px;
  --container-pad: var(--space-6);
  --section-y:     var(--space-24);

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width:    1.5px;
  --border-width-lg: 2.5px;
  --border-chunky:   4px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(44, 39, 71, 0.06);
  --shadow-sm: 0 2px 8px rgba(44, 39, 71, 0.08);
  --shadow-md: 0 8px 22px rgba(44, 39, 71, 0.10);
  --shadow-lg: 0 16px 40px rgba(44, 39, 71, 0.14);
  --shadow-xl: 0 28px 60px rgba(44, 39, 71, 0.18);

  --shadow-pink: 0 10px 26px rgba(255, 117, 175, 0.40);
  --shadow-cyan: 0 10px 26px rgba(97, 199, 216, 0.40);
  --shadow-yellow: 0 10px 26px rgba(255, 203, 69, 0.45);

  --shadow-sticker: 0 4px 0 rgba(44, 39, 71, 0.12);

  --edge-pink:   inset 0 -4px 0 var(--brand-primary-deep);
  --edge-cyan:   inset 0 -4px 0 var(--brand-secondary-deep);
  --edge-accent: inset 0 -4px 0 var(--brand-accent-deep);
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: var(--font-body-md);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
h1 { font: var(--font-h1); }
h2 { font: var(--font-h2); }
h3 { font: var(--font-h3); }
h4 { font: var(--font-h4); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; font-weight: var(--fw-bold); }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }
button { font-family: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
::selection { background: var(--pink-200); color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}