/* =========================================================================
   PIFFLEWORKS DESIGN SYSTEM — colors_and_type.css
   The brand foundation for the Piffleworks humor blog network.
   Derived from the piffleworks-agent codebase (brand voice + product context).
   No brand fonts/logos existed in the source — fonts are Google Fonts
   substitutions (see README → VISUAL FOUNDATIONS). Flag for replacement.
   ========================================================================= */

/* ---- Webfonts (Google Fonts CDN — SUBSTITUTIONS, no brand fonts shipped) -- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =====================================================================
     COLOR — RAW PALETTE
     Warm "newsprint" base + a punchy humor-brand coral.
     ===================================================================== */

  /* Paper / surfaces (warm cream "newsprint", not stark white) */
  --paper:        #FBF6EC;   /* page background */
  --paper-2:      #F4ECDC;   /* sunken / alt rows / code wells */
  --card:         #FFFFFF;   /* raised cards */
  --ink-wash:     #FFFDF8;   /* near-white panels on cream */

  /* Ink / text (warm near-black, never pure #000) */
  --ink:          #1C160F;   /* primary text */
  --ink-2:        #5A5042;   /* secondary text / meta */
  --ink-3:        #8A7E6B;   /* tertiary / captions / placeholders */

  /* Lines / borders (warm taupe) */
  --line:         #E3D8C2;   /* hairlines, dividers */
  --line-strong:  #CDBE9F;   /* input borders, stronger rules */
  --line-ink:     #1C160F;   /* heavy "zine" outline */

  /* Brand primary — coral-red. Distinct from Etsy orange (#F1641E). */
  --coral:        #F0502E;
  --coral-deep:   #D63C1B;   /* hover / pressed */
  --coral-soft:   #FCE3D9;   /* tint backgrounds */

  /* Network accents — each niche blog swaps --accent to one of these.
     The blog theme reads --accent / --accent-deep / --accent-soft. */
  --teal:         #1F8A70;   --teal-deep:  #166B57;   --teal-soft:  #D8EEE7;
  --grape:        #6D4AC4;   --grape-deep: #553795;   --grape-soft: #E6DEF7;
  --mustard:      #E0A100;   --mustard-deep:#B47F00;  --mustard-soft:#F8ECC4;
  --berry:        #E84C8A;   --berry-deep: #C53270;   --berry-soft: #FBDDE9;
  --sky:          #2C7BD4;   --sky-deep:   #1F5EA8;   --sky-soft:   #D7E7F8;

  /* Default network accent (Piffleworks flagship = coral) */
  --accent:       var(--coral);
  --accent-deep:  var(--coral-deep);
  --accent-soft:  var(--coral-soft);

  /* Semantic states */
  --good:         #2E8B57;
  --warn:         #C98A00;
  --bad:          #C5402B;

  /* Highlight (marker / "joke text") */
  --marker:       #FFE69A;   /* yellow highlighter */

  /* =====================================================================
     TYPOGRAPHY — FAMILIES
     ===================================================================== */
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* TYPE SCALE (fluid-ish, rem) */
  --text-xs:   0.75rem;   /* 12px — micro labels */
  --text-sm:   0.875rem;  /* 14px — meta, captions */
  --text-base: 1.0625rem; /* 17px — body reading size */
  --text-lg:   1.1875rem; /* 19px — lead paragraph */
  --text-xl:   1.5rem;    /* 24px — h3 / card titles */
  --text-2xl:  2rem;      /* 32px — h2 */
  --text-3xl:  2.75rem;   /* 44px — h1 / article title */
  --text-4xl:  3.75rem;   /* 60px — page hero */
  --text-5xl:  5rem;      /* 80px — display / wordmark */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.6;  /* body reading */

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;  /* uppercase eyebrows */

  /* =====================================================================
     SPACING — 4px base scale
     ===================================================================== */
  --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;

  /* Layout widths */
  --measure:      68ch;     /* article reading column */
  --container:    1200px;   /* site max width */

  /* =====================================================================
     RADIUS — gently rounded, friendly but not bubbly
     ===================================================================== */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* =====================================================================
     SHADOWS + the signature "hard offset" zine shadow
     ===================================================================== */
  --shadow-sm:  0 1px 2px rgba(28,22,15,0.06);
  --shadow-md:  0 4px 16px rgba(28,22,15,0.08);
  --shadow-lg:  0 14px 40px rgba(28,22,15,0.12);
  /* Hard offset shadow — the playful "sticker" look. Pairs w/ --line-ink. */
  --shadow-hard:      4px 4px 0 var(--line-ink);
  --shadow-hard-coral:4px 4px 0 var(--coral);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — apply to a `.pw` scope so cards/kits inherit.
   ========================================================================= */
.pw {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display grotesque, tight, warm ink */
.pw h1, .pw h2, .pw h3, .pw h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
.pw h1 { font-size: var(--text-3xl); }
.pw h2 { font-size: var(--text-2xl); font-weight: 700; }
.pw h3 { font-size: var(--text-xl);  font-weight: 700; }
.pw h4 { font-size: var(--text-lg);  font-weight: 600; font-family: var(--font-ui); }

/* Body copy — editorial serif */
.pw p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
.pw .lead { font-size: var(--text-lg); color: var(--ink-2); line-height: 1.5; }

/* Eyebrow / kicker label */
.pw .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Links — underline that thickens on hover */
.pw a { color: var(--accent-deep); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.pw a:hover { text-decoration-thickness: 3px; }

/* Inline emphasis */
.pw strong { font-weight: 700; color: var(--ink); }
.pw em { font-style: italic; }
.pw mark { background: var(--marker); padding: 0.05em 0.2em; border-radius: 3px; }

/* Code / meta */
.pw code, .pw .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* Eyebrow rule used across cards */
.pw blockquote {
  margin: 1.4em 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--accent);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-2);
}