/* ==========================================================================
   DESIGN SYSTEM — cvprojekt.pl
   Tokens, reset, accent themes, animations.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Palette ── */
  --bg-body:      #f5f6fa;
  --bg-card:      #ffffff;
  --bg-inset:     #f0f1f5;
  --bg-hover:     #eaecf2;

  --text-primary:   #1e2330;
  --text-secondary: #5a6178;
  --text-muted:     #8b91a5;

  --border:       #dfe2ea;
  --border-light: #eceef4;

  /* ── Accent (default: indigo) ── */
  --accent:       #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft:  #eef2ff;
  --accent-ring:  rgba(79,70,229,.18);

  /* ── Typography ── */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-cv: 'Inter', 'Roboto', sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .8125rem;
  --fs-base: .9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  /* ── Spacing (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ── Radius ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --sh-xs:  0 1px 2px rgba(30,35,48,.04);
  --sh-sm:  0 1px 3px rgba(30,35,48,.06), 0 1px 2px rgba(30,35,48,.04);
  --sh-md:  0 4px 14px rgba(30,35,48,.07), 0 1px 3px rgba(30,35,48,.04);
  --sh-lg:  0 10px 32px rgba(30,35,48,.09), 0 2px 6px rgba(30,35,48,.04);
  --sh-xl:  0 20px 50px rgba(30,35,48,.12);

  /* ── Motion ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast:   .15s var(--ease);
  --t-normal: .25s var(--ease);
  --t-slow:   .4s  var(--ease);
}

/* ── Accent themes ── */
body[data-accent='graphite']   { --accent:#4b5563; --accent-hover:#374151; --accent-soft:#f3f4f6; --accent-ring:rgba(75,85,99,.18); }
body[data-accent='burgundy']   { --accent:#be123c; --accent-hover:#9f1239; --accent-soft:#fff1f2; --accent-ring:rgba(190,18,60,.18); }
body[data-accent='emerald']    { --accent:#059669; --accent-hover:#047857; --accent-soft:#ecfdf5; --accent-ring:rgba(5,150,105,.18); }
body[data-accent='navy']       { --accent:#1d4ed8; --accent-hover:#1e40af; --accent-soft:#eff6ff; --accent-ring:rgba(29,78,216,.18); }
body[data-accent='anthracite'] { --accent:#475569; --accent-hover:#334155; --accent-soft:#f1f5f9; --accent-ring:rgba(71,85,105,.18); }

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font:inherit; }
ul,ol { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.25; }

/* ── Selection & Scrollbar ── */
::selection { background:var(--accent); color:#fff; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cfd2db; border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover { background:#b3b8c5; }
html { scrollbar-width:thin; scrollbar-color:#cfd2db transparent; }

/* ── Animations ── */
@keyframes fadeIn   { from{opacity:0}           to{opacity:1} }
@keyframes slideUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.97)}      to{opacity:1;transform:scale(1)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }