/* ============================================================
   popupcities.org — design tokens
   Source of truth. Mirrors the Thou Ārt design system
   (Framer tokens resolved 2026-08-28, cross-referenced against
   thouartofficial.com/research/popupcityreport and /contact).
   A machine-readable copy lives in /design-tokens.json (W3C
   format, importable into Figma via Tokens Studio).
   ============================================================ */

:root {
  /* ---- Color: core ---- */
  --pc-black:        #1D1D20;  /* "Black" — ink, primary text */
  --pc-white:        #FFFFFF;
  --pc-accent:       #1862F5;  /* "Accent" — actionable elements, dashed labels */
  --pc-gray:         #BEC0C2;  /* "Gray" — footnotes, dim posts */
  --pc-light-gray:   #DADCE3;  /* "Light Gray" — hairline borders */
  --pc-dark-grey:    #4D4D4D;  /* "Dark Grey" */
  --pc-dark-grey-2:  #858585;  /* "dark grey 2" — muted text, bottom-menu hover */
  --pc-black-025:    rgba(34, 34, 34, 0.25);  /* "Black 0.25" — nav hover fade */
  --pc-white-05:     rgba(255, 255, 255, 0.5);

  /* ---- Color: tinted surfaces ---- */
  --pc-blue-light:   #D4E2FF;  /* "Blue Light" — active tab, code bg */
  --pc-blue-grey:    #D5DEF0;  /* "Blue Grey" — research surface tint */
  --pc-apple-grey:   #F3F6F8;  /* "apple grey" — panels, footer band */
  --pc-offwhite:     #F5F5F5;
  --pc-dark-blue:    #0E00C2;  /* "Dark Blue" — codeblock text */
  --pc-sky-blue:     #1B9CF3;
  --pc-orange:       #FF7017;
  --pc-halo-gold:    #E3DDD3;
  --pc-halo-gold-light: #ECE8E4;

  /* ---- Semantic aliases (use these in components) ---- */
  --ink:      var(--pc-black);
  --muted:    var(--pc-dark-grey-2);
  --faint:    var(--pc-gray);
  --accent:   var(--pc-accent);
  --tint:     var(--pc-blue-light);
  --panel:    var(--pc-apple-grey);
  --border:   var(--pc-light-gray);
  --paper:    var(--pc-white);

  /* ---- Type ---- */
  --sans:   "Inter", "Inter Display", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:  "Newsreader", "Georgia", "Times New Roman", serif;

  /* Type scale — exact computed values from thouartofficial.com
     (/research/pcri + report page, verified 2026-08-28) */
  --fs-title:    28px;  --lh-title: 1.3;   /* Inter 700 — page/post title */
  --fs-lede:     19px;  --lh-lede:  1.3;   /* ledes */
  --fs-body-lg:  18px;                      /* Inter 400 1.1 */
  --fs-heading:  17px;                      /* Inter 500 1.4 — section headings */
  --fs-body:     16px;  --lh-body: 1.5;    /* default body text (16/1.5) */
  --p-space:     20px;                      /* paragraph spacing */
  --fs-ui:       15px;                      /* interface: nav, sidebar, footer */
  --lh-ui:       18px;                      /* nav (15/18) */
  --lh-tab:      21px;                      /* sidebar tabs & posts (15/21) */
  --lh-flat:     15px;                      /* footer (15/15) */
  --fs-note:     13px;
  --fs-fine:     12px;
  --fs-badge:    10px;  --lh-badge: 14px;  /* "Soon"/"WIP" chips, Inter 600 */
  --ls-tight:    -0.02em;                   /* −0.3px @ 15px — applies to ALL text */

  /* ---- Icons: Phosphor (phosphoricons.com) is the default icon set.
     Regular weight, filled paths, viewBox 0 0 256 256. ---- */
  --icon-size:  18px;
  --icon-color: var(--pc-dark-grey);        /* #4D4D4D, as on live sidebar */

  /* ---- Radii (observed: 8 / 12 / 100 / 4) ---- */
  --r-xs:   4px;    /* code spans */
  --r-sm:   8px;    /* tabs, small cards */
  --r-md:   12px;   /* cards, panels */
  --r-pill: 100px;  /* buttons */

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.44, 0, 0.56, 1);  /* Framer "tween 0.44,0,0.56,1" */
  --dur:       0.4s;
  --dur-fast:  0.16s;

  /* ---- Layout (measured @1440: container 1000, content left-aligned:
     sidebar 240 + gap 25 + article 520, right rail left empty) ---- */
  --maxw: 1000px;
  --gutter: 15px;               /* collapses to 0 on wide screens (see below) */
  --sidebar-w: 270px;           /* outer block: 10px pad + 250 frame */
  --side-frame-pad: 5px;        /* grey frame: #F3F6F8, r12, wraps white cards */
  --main-w: 520px;
  --col-gap: 10px;
  --nav-h: 46px;

  /* ---- Button (observed: 1px solid, r100, 10px 16px) ---- */
  --btn-pad: 10px 16px;
}

/* Wide screens: content sits at the container edge (measured x=220 @1440) */
@media (min-width: 1060px) {
  :root { --gutter: 0px; }
}