/* =========================================================================
   Weird Being Human — Colors & Type
   Vintage folk-art register. Light-mode cream is the canvas.
   ========================================================================= */

/* Google Fonts substitutions for Canva-only brand fonts.
   Hangyaboly → Caveat   |   Paper Cutting → Shadows Into Light
   Petapon → Bebas Neue  |   Pinkerton → Indie Flower
   Body / mono: Caveat + DM Mono as a Code Pro substitute. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Shadows+Into+Light&family=Bebas+Neue&family=Indie+Flower&family=DM+Mono:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---------------------------------------------------------------------
     WBH CORE PALETTE
     --------------------------------------------------------------------- */

  /* Backgrounds (the canvas — never pure white) */
  --wbh-soft-linen:    #F5EFE5;
  --wbh-floral-white:  #FFFEF5;

  /* Anchors — pick ONE per design as the hero */
  --wbh-olive-leaf:    #515D11;
  --wbh-periwinkle:    #C5D1F8;
  --wbh-espresso:      #521A14;   /* also primary text */

  /* Earth depths */
  --wbh-fern:          #5D7748;
  --wbh-clay-soil:     #6B403A;
  --wbh-dry-sage:      #C0BA80;

  /* Soft accents — sparingly */
  --wbh-soft-blush:    #F7DDD5;
  --wbh-soft-blossom:  #D8A4AF;
  --wbh-thistle:       #CEC2D2;
  --wbh-lavender:      #E2DDEC;
  --wbh-powder-blue:   #A9BBEC;
  --wbh-light-gold:    #F7E594;

  /* ---------------------------------------------------------------------
     CONSCIOUS DROP PALETTE — newsletter only
     --------------------------------------------------------------------- */
  --cd-bright-snow:      #FAFAFA;
  --cd-periwinkle:       #C4D1F8;
  --cd-twilight-indigo:  #29385A;
  --cd-wisteria-blue:    #91A6EB;
  --cd-espresso:         #521A14;
  --cd-carbon-black:     #1E1F22;

  /* ---------------------------------------------------------------------
     SEMANTIC TOKENS (WBH default)
     --------------------------------------------------------------------- */
  --bg:           var(--wbh-soft-linen);
  --bg-elevated:  var(--wbh-floral-white);
  --fg:           var(--wbh-espresso);          /* primary text */
  --fg-muted:     #6B403A;                       /* clay soil — supporting */
  --fg-soft:      #9c7a72;                       /* tinted espresso for captions */
  --hairline:     rgba(82, 26, 20, 0.16);        /* espresso @ 16% */
  --hairline-strong: rgba(82, 26, 20, 0.32);
  --accent:       var(--wbh-olive-leaf);
  --accent-soft:  var(--wbh-periwinkle);
  --signal:       var(--wbh-espresso);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — display + body
     Rule: one display font per design. Never pair two display faces.
     --------------------------------------------------------------------- */

  /* Display families (rotate by use, never combine in one design) */
  --font-hangyaboly:    'Caveat', 'Bradley Hand', cursive;          /* Hangyaboly sub */
  --font-paper-cutting: 'Shadows Into Light', 'Caveat', cursive;    /* Paper Cutting sub */
  --font-petapon:       'Bebas Neue', 'Impact', sans-serif;         /* Petapon sub */
  --font-pinkerton:     'Indie Flower', 'Caveat', cursive;          /* Pinkerton sub */

  /* Body / mono / serif */
  --font-body:    'Caveat', 'Bradley Hand', cursive;                 /* hand-feel body */
  --font-mono:    'DM Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Code Pro sub */
  --font-serif:   'EB Garamond', 'Iowan Old Style', Georgia, serif;  /* poetry / quotes */

  /* Default pairings — DEFAULT to Hangyaboly display + DM Mono body */
  --font-display: var(--font-hangyaboly);
  --font-ui:      var(--font-mono);

  /* ---------------------------------------------------------------------
     TYPE SCALE
     Slow, generous, breathing. Line-heights err loose.
     --------------------------------------------------------------------- */
  --t-display-xl:  clamp(72px, 9vw, 144px);  /* hero title cards */
  --t-display-l:   clamp(56px, 6vw, 96px);   /* section openers */
  --t-display-m:   clamp(40px, 4.5vw, 64px); /* lower thirds, callouts */
  --t-h1:          44px;
  --t-h2:          32px;
  --t-h3:          24px;
  --t-body-lg:     22px;
  --t-body:        18px;
  --t-body-sm:     15px;
  --t-caption:     13px;
  --t-mono:        14px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-loose:    1.6;

  --tracking-display: -0.005em;
  --tracking-ui:      0.02em;
  --tracking-caps:    0.14em;

  /* ---------------------------------------------------------------------
     SPACING — generous, breathy
     --------------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------------
     RADII — soft, hand-shaped
     --------------------------------------------------------------------- */
  --r-1:  6px;
  --r-2:  10px;
  --r-3:  16px;
  --r-4:  24px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — subtle, warm. No drop-shadows on cream; use tonal depth.
     --------------------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(82, 26, 20, 0.06), 0 2px 8px rgba(82, 26, 20, 0.04);
  --shadow-2: 0 2px 0 rgba(82, 26, 20, 0.08), 0 12px 28px rgba(82, 26, 20, 0.08);
  --shadow-press: inset 0 2px 4px rgba(82, 26, 20, 0.12);

  /* ---------------------------------------------------------------------
     MOTION
     Slow, considered, breathing. Never linear. Never bouncy.
     --------------------------------------------------------------------- */
  --ease-breathe: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal:  cubic-bezier(0.22, 1, 0.36, 1);    /* gentle ease-out */
  --ease-settle:  cubic-bezier(0.65, 0, 0.35, 1);    /* ease-in-out */
  --dur-quick:    320ms;
  --dur-steady:   600ms;
  --dur-slow:     1200ms;
  --dur-glacial:  2400ms;   /* drop fills, watermark pulses */
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */
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;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  font-weight: 500;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
  font-weight: 500;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  font-weight: 500;
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--fg-soft);
  letter-spacing: var(--tracking-ui);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-muted);
}

blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: var(--lh-tight); }
.display-l  { font-family: var(--font-display); font-size: var(--t-display-l);  line-height: var(--lh-tight); }
.display-m  { font-family: var(--font-display); font-size: var(--t-display-m);  line-height: var(--lh-snug); }

/* Display-font utility classes (use exactly one per design) */
.font-hangyaboly    { font-family: var(--font-hangyaboly); }
.font-paper-cutting { font-family: var(--font-paper-cutting); }
.font-petapon       { font-family: var(--font-petapon); letter-spacing: 0.02em; }
.font-pinkerton     { font-family: var(--font-pinkerton); }

/* Conscious Drop theming override — apply on a wrapper */
.cd-theme {
  --bg:           var(--cd-bright-snow);
  --bg-elevated:  #fff;
  --fg:           var(--cd-twilight-indigo);
  --fg-muted:     #4a5778;
  --accent:       var(--cd-twilight-indigo);
  --accent-soft:  var(--cd-periwinkle);
}