/* =========================================================
   PAPERBOY DESIGN SYSTEM — colors_and_type.css
   Strict black & white. Editorial. Newspaper-inspired.
   ========================================================= */

/* ---- Fonts ----------------------------------------------- */
/* All web fonts are loaded via <link rel="stylesheet"> in index.html
   so that file:// local previews work (Chrome blocks @import over file://).
   Display face: Fraunces (variable, full Latin Extended — supports
   č ć đ š ž and every Bosnian/Croatian/Serbian diacritic).
   Aalto Display was dropped because its personal-use cut lacks those glyphs. */

:root {
  /* -------- COLOR TOKENS (strict B&W) -------- */
  --ink:        #0A0A0A;   /* primary ink — not pure #000 to feel printed */
  --ink-soft:   #1A1A1A;   /* body text */
  --graphite:   #4A4A4A;   /* secondary text, captions */
  --pencil:     #8A8A8A;   /* tertiary text, meta */
  --rule:       #1A1A1A;   /* thin dividers (use at 1px) */
  --rule-soft:  #D9D9D9;   /* subtle dividers */
  --paper:      #FAFAF7;   /* off-white background — slight paper warmth */
  --paper-pure: #FFFFFF;   /* pure white (cards, insets) */
  --newsprint:  #F2F0EB;   /* slightly warmer paper tone for sections */

  /* -------- SEMANTIC -------- */
  --fg1: var(--ink);
  --fg2: var(--ink-soft);
  --fg3: var(--graphite);
  --fg4: var(--pencil);
  --bg:  var(--paper);
  --bg-alt: var(--newsprint);
  --bg-invert: var(--ink);
  --fg-invert: var(--paper);
  --border: var(--rule);
  --border-soft: var(--rule-soft);

  /* -------- TYPE FAMILIES -------- */
  --font-display: 'Fraunces', 'Bodoni Moda', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif:   'Fraunces', 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* -------- TYPE SCALE (editorial, with contrast) -------- */
  --fs-kicker: 11px;    /* overline, eyebrow */
  --fs-meta:   13px;    /* captions, meta */
  --fs-body:   17px;    /* body */
  --fs-lead:   20px;    /* lead paragraph */
  --fs-h6:     18px;
  --fs-h5:     22px;
  --fs-h4:     28px;
  --fs-h3:     40px;
  --fs-h2:     56px;
  --fs-h1:     88px;
  --fs-hero:   144px;   /* headline-of-the-day */

  /* -------- WEIGHTS -------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* -------- LINE-HEIGHTS -------- */
  --lh-tight:   0.95;
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  /* -------- TRACKING -------- */
  --tr-hero:   -0.03em;
  --tr-tight:  -0.02em;
  --tr-normal: 0;
  --tr-kicker: 0.18em;   /* uppercase eyebrows */
  --tr-label:  0.08em;

  /* -------- SPACING (4px base) -------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* -------- LAYOUT -------- */
  --col-max: 1280px;
  --col-gap: 32px;
  --rule-thin: 1px;
  --rule-med:  2px;
  --rule-thick: 4px;

  /* -------- RADII (minimal — mostly none) -------- */
  --r-0: 0;
  --r-1: 2px;   /* only for tiny utility chips if needed */

  /* -------- ELEVATION (almost none) -------- */
  --shadow-none: none;
  --shadow-subtle: 0 1px 0 rgba(10,10,10,0.04);  /* hairline only */

  /* -------- MOTION -------- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg1);
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-display); letter-spacing: var(--tr-hero); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: var(--lh-display); letter-spacing: var(--tr-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); }

p  { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg2); font-family: var(--font-serif); }
small, .meta { font-size: var(--fs-meta); color: var(--fg3); }

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--fg1);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg1);
}

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--fg1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: var(--rule-thin) solid var(--border); margin: var(--s-6) 0; }

/* Editorial utilities */
.rule-top    { border-top:    var(--rule-thin) solid var(--border); }
.rule-bottom { border-bottom: var(--rule-thin) solid var(--border); }
.rule-top-thick    { border-top: var(--rule-thick) solid var(--border); }
.rule-bottom-thick { border-bottom: var(--rule-thick) solid var(--border); }

.serif    { font-family: var(--font-serif); }
.sans     { font-family: var(--font-sans); }
.mono     { font-family: var(--font-mono); }
.italic   { font-style: italic; }
.uppercase { text-transform: uppercase; letter-spacing: var(--tr-label); }

.ink-invert { background: var(--bg-invert); color: var(--fg-invert); }
.ink-invert h1, .ink-invert h2, .ink-invert h3, .ink-invert h4, .ink-invert h5, .ink-invert h6,
.ink-invert p, .ink-invert .meta { color: var(--fg-invert); }

/* Drop cap — editorial flair */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em 0 0;
}