/* ============================================================
   PAUTA — Colors & Type
   Editorial-style Instagram carousel tool.
   Swiss modernism + editorial brutalism + independent publishing.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Palette: 80 / 15 / 5 rule ---------- */

  /* 80% — Ink + Paper */
  --ink:                  #0A0A0A;   /* near-black, primary text & surfaces */
  --paper:                #F4EFE4;   /* cream, primary background */

  /* 15% — Editorial neutral */
  --bottle:               #1F3D2B;   /* deep green; secondary surfaces */

  /* 5% — Signal */
  --signal:               #FF5B1A;   /* CTAs, the dot, single accent */

  /* Secondary, used sparingly */
  --archive-yellow:       #E2C044;   /* highlight / archive tag */
  --dust:                 #D7D0C4;   /* paper-tone gray */
  --print-red:            #A63224;   /* error, stamp red */

  /* Derived neutrals on cream */
  --paper-2:              #ECE6D7;   /* slightly deeper paper */
  --paper-rule:           #E2DCCB;   /* hairline on paper */
  --ink-2:                #1A1A1A;   /* dialed-back ink */
  --ink-3:                #3C3C3C;   /* secondary text */
  --ink-4:                #6B6862;   /* tertiary / metadata */
  --ink-5:                #A39E94;   /* disabled / placeholder */

  /* On dark surfaces */
  --paper-on-ink:         #F4EFE4;
  --paper-on-ink-2:       #C9C3B6;
  --paper-on-ink-3:       #8A857C;

  /* ---------- Semantic ---------- */
  --bg:                   var(--paper);
  --bg-inset:             var(--paper-2);
  --bg-inverse:           var(--ink);

  --fg:                   var(--ink);
  --fg-2:                 var(--ink-3);
  --fg-3:                 var(--ink-4);
  --fg-disabled:          var(--ink-5);
  --fg-inverse:           var(--paper);

  --rule:                 var(--ink);          /* 1px solid black is the default border */
  --rule-soft:            var(--paper-rule);   /* hairline on paper */
  --rule-strong:          var(--ink);

  --accent:               var(--signal);
  --accent-hover:         #E84D0E;
  --accent-fg:            var(--paper);

  --focus-ring:           var(--signal);

  --tag-archive-bg:       var(--archive-yellow);
  --tag-archive-fg:       var(--ink);

  --danger:               var(--print-red);
  --warning:              var(--archive-yellow);
  --success:              var(--bottle);

  /* ---------- Type families ---------- */
  --font-display:   "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:      "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:      "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type scale (editorial, generous jumps) ---------- */
  --t-display-xl:   clamp(72px, 9vw, 168px);
  --t-display-l:    clamp(56px, 6.5vw, 112px);
  --t-display-m:    clamp(40px, 4.5vw, 72px);
  --t-h1:           48px;
  --t-h2:           36px;
  --t-h3:           24px;
  --t-h4:           18px;
  --t-body:         16px;
  --t-small:        14px;
  --t-mono-label:   12px;
  --t-mono-meta:    11px;

  --lh-tight:       0.95;
  --lh-snug:        1.10;
  --lh-normal:      1.45;
  --lh-loose:       1.60;

  --track-display:  -0.03em;   /* tight headlines */
  --track-tight:    -0.02em;
  --track-normal:   0em;
  --track-mono:     0.04em;    /* mono labels, +4% */
  --track-wide:     0.08em;

  /* ---------- Spacing (4px base, editorial gutters at top) ---------- */
  --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:  192px;
  --s-12:  256px;

  /* ---------- Radii — never bubble UI ---------- */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;    /* maximum */

  /* ---------- Borders ---------- */
  --bw-hair:   1px;
  --bw-rule:   1px;
  --bw-heavy:  2px;

  /* ---------- Shadows — print feel, hard, short-offset ---------- */
  --shadow-print:      4px 4px 0 0 var(--ink);          /* hard offset, no blur */
  --shadow-print-sm:   2px 2px 0 0 var(--ink);
  --shadow-card:       0 1px 0 0 var(--paper-rule);     /* hairline lift */
  --shadow-none:       none;

  /* ---------- Motion — dry, short ---------- */
  --dur-120: 120ms;
  --dur-160: 160ms;
  --dur-200: 200ms;
  --ease-dry: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout grid ---------- */
  --grid-cols:     12;
  --grid-gutter:   24px;
  --grid-margin:   clamp(24px, 5vw, 96px);
  --grid-max:      1440px;
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--signal);
  color: var(--paper);
}

/* Headlines: Space Grotesk, tight tracking */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.20;
  letter-spacing: var(--track-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.30;
  letter-spacing: 0;
  margin: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-m);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  margin: 0;
}
.body-l {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.50;
}
.small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.50;
}

/* Mono labels — uppercase, +4% tracking */
.label, .label-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-label);
  line-height: 1;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}
.meta-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-meta);
  line-height: 1.40;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}
.numeral {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Editorial numbering glyph, e.g. "№ 12" or "01 / 07" */
.editorial-no {
  font-family: var(--font-mono);
  font-size: var(--t-mono-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}

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

hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: var(--s-5) 0; }