/* ============================================================
   WielkiFormat.pl — Design Tokens
   Colors · Typography · Spacing · Radii · Shadows
   ============================================================ */

/* Fonty self-hosted przez /fonts.css (Etap F2 — Punkt 3). Google Fonts @import usunięty. */

/* ── Color Primitives ──────────────────────────────────────── */
:root {
  --black:       #000000;
  --white:       #FFFFFF;

  --gray-950:    #0A0A0A;
  --gray-900:    #111111;
  --gray-800:    #1A1A1A;
  --gray-700:    #2A2A2A;
  --gray-600:    #3A3A3A;
  --gray-500:    #555555;
  --gray-400:    #777777;
  --gray-300:    #999999;
  --gray-200:    #CCCCCC;
  --gray-100:    #E8E8E8;

  --red-500:     #E8272A;
  --red-400:     #FF3A3D;

  --gold-600:    #A07820;
  --gold-500:    #C9A030;
  --gold-400:    #E0B840;
  --gold-300:    #F0D070;
}

/* ── Semantic Color Tokens ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-page:           var(--black);
  --bg-surface:        var(--gray-900);
  --bg-surface-raised: var(--gray-800);
  --bg-overlay:        rgba(0, 0, 0, 0.55);

  /* Borders */
  --border-subtle:     var(--gray-700);
  --border-default:    var(--gray-600);
  --border-strong:     var(--gray-400);

  /* Text */
  --text-primary:      var(--white);
  --text-secondary:    var(--gray-300);
  --text-muted:        var(--gray-500);
  --text-disabled:     var(--gray-600);
  --text-inverse:      var(--black);

  /* Accent */
  --accent:            var(--red-500);
  --accent-hover:      var(--red-400);
  --gold:              var(--gold-500);
  --gold-light:        var(--gold-400);

  /* Interactive */
  --btn-primary-bg:    var(--white);
  --btn-primary-text:  var(--black);
  --btn-primary-hover: var(--gray-100);
  --btn-outline-border: var(--white);
  --btn-outline-text:   var(--white);
  --btn-outline-hover-bg: var(--white);
  --btn-outline-hover-text: var(--black);
}

/* ── Typography ────────────────────────────────────────────── */
:root {
  --font-sans:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     17px;
  --text-lg:     20px;
  --text-xl:     24px;
  --text-2xl:    32px;
  --text-3xl:    48px;
  --text-4xl:    64px;
  --text-5xl:    88px;
  --text-hero:   clamp(64px, 9vw, 120px);

  /* Weight */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-black:     900;

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-caps:     0.2em;
}

/* ── Semantic Type Styles ──────────────────────────────────── */
:root {
  /* Headings */
  --h1-size:    var(--text-hero);
  --h1-weight:  var(--weight-black);
  --h1-leading: var(--leading-tight);
  --h1-tracking: var(--tracking-tight);

  --h2-size:    var(--text-4xl);
  --h2-weight:  var(--weight-black);
  --h2-leading: var(--leading-tight);

  --h3-size:    var(--text-3xl);
  --h3-weight:  var(--weight-black);
  --h3-leading: var(--leading-snug);

  --h4-size:    var(--text-2xl);
  --h4-weight:  var(--weight-semibold);
  --h4-leading: var(--leading-snug);

  /* Body */
  --body-size:    var(--text-base);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);
  --body-color:   var(--text-secondary);

  /* UI / nav */
  --ui-size:    var(--text-base);
  --ui-weight:  var(--weight-medium);
  --ui-leading: var(--leading-normal);

  /* Labels (all-caps section titles) */
  --label-size:     var(--text-xs);
  --label-weight:   var(--weight-semibold);
  --label-tracking: var(--tracking-caps);
  --label-transform: uppercase;
  --label-color:    var(--text-muted);
}

/* ── Spacing Scale ─────────────────────────────────────────── */
:root {
  --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;
  --space-30: 120px;
  --space-40: 160px;

  --section-v:    var(--space-30);
  --content-max:  1200px;
  --gutter:       var(--space-6);
}

/* ── Border Radii ──────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;
}

/* ── Transitions ───────────────────────────────────────────── */
:root {
  --ease:        ease;
  --ease-out:    ease-out;
  --duration-fast: 0.15s;
  --duration:      0.2s;
  --duration-slow: 0.35s;
}

/* ── Base Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--body-size);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); }
p  { color: var(--body-color); line-height: var(--leading-relaxed); }

.label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--label-color);
}

a { color: inherit; text-decoration: none; }