/* ==========================================================================
   IvoryTasks brand tokens, the single source of truth.
   Mirrors site-v2/css/styles.css and adds supporting tones + social helpers.
   Display: Bricolage Grotesque. Body: Inter. Script accent: Caveat.
   (Distinct from Organize Mayhem, which uses Fraunces + EB Garamond.)
   ========================================================================== */

@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=Caveat:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Base palette (locked, matches the site) */
  --cream: #FAF8F3;       /* primary light background */
  --white: #FFFFFF;       /* surface / cards */
  --ink: #1A1A1A;         /* primary text + dark background */
  --ink-soft: #2A2823;    /* softer dark */
  --ink-2: #5C5A54;       /* secondary text */
  --ink-3: #908D85;       /* tertiary text */
  --border: #E8E5DD;      /* hairlines */
  --terracotta: #B4582F;  /* accent: marks, script, highlights */

  /* Supporting tones (social variety, harmonize with terracotta) */
  --sand: #EDE4D3;        /* warm light alt background */
  --sage: #6B7257;        /* deep earthy accent / dark alt background */
  --clay: #EBD3C5;        /* soft accent fill / highlight wash */

  /* Aliases used by shared component styles */
  --bg: var(--cream);
  --surface: var(--white);
  --accent: var(--terracotta);

  /* Type */
  --serif: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; /* display font (kept var name for compatibility) */
  --script: 'Caveat', 'Segoe Script', cursive;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius, shadow, motion */
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.04), 0 6px 18px rgba(26,26,26,0.05);
  --shadow-lg: 0 6px 16px rgba(26,26,26,0.07), 0 22px 50px rgba(26,26,26,0.10);

  /* The starburst motif, reusable */
  --starburst: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---- Color utility classes (background + correct on-color text) ---- */
.on-cream { background: var(--cream); color: var(--ink); }
.on-white { background: var(--white); color: var(--ink); }
.on-sand  { background: var(--sand);  color: var(--ink); }
.on-ink   { background: var(--ink);   color: var(--cream); }
.on-sage  { background: var(--sage);  color: var(--cream); }
.on-terra { background: var(--terracotta); color: var(--cream); }

/* ---- The starburst, as a reusable element ---- */
.star { display: inline-block; width: 1em; height: 1em; background: var(--terracotta); clip-path: var(--starburst); vertical-align: middle; }
.star-cream { background: var(--cream); }

/* ---- Script accent + highlight marker (use sparingly) ---- */
.script { font-family: var(--script); color: var(--terracotta); font-weight: 600; }
.mark { position: relative; white-space: nowrap; }
.mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 36%; background: var(--clay); z-index: -1; border-radius: 2px; }

/* ==========================================================================
   SOCIAL SLIDE HELPERS
   Fixed-size frames for export. Screenshot each .slide at its native size.
   ========================================================================== */
.slide {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.slide * { box-sizing: border-box; }

/* Instagram carousel 4:5 */
.slide-ig { width: 1080px; height: 1350px; padding: 96px; }
/* LinkedIn square 1:1 */
.slide-li { width: 1200px; height: 1200px; padding: 110px; }

/* Slide typography (large, for legibility at scroll size) */
.slide .s-eyebrow { font-family: var(--sans); font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 14px; margin: 0 0 32px; }
.slide .s-eyebrow .star { width: 22px; height: 22px; }
.slide h2.s-title { font-family: var(--serif); font-weight: 600; font-size: 92px; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.slide .s-body { font-family: var(--sans); font-size: 36px; line-height: 1.5; margin: 28px 0 0; }
.slide .s-script { font-family: var(--script); font-size: 80px; line-height: 1; }
.slide .s-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 26px; font-weight: 600; }
.slide .s-brand { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
.slide .s-brand .dot { color: var(--terracotta); }
.slide .s-handle { opacity: 0.7; font-weight: 500; }
.slide .s-num { font-family: var(--serif); font-size: 30px; opacity: 0.6; }

/* Big numbered list for content slides */
.s-list { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 30px; }
.s-list li { position: relative; padding-left: 64px; font-family: var(--sans); font-size: 40px; line-height: 1.3; }
.s-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 34px; height: 34px; background: var(--terracotta); clip-path: var(--starburst); }
.on-ink .s-list li::before, .on-sage .s-list li::before, .on-terra .s-list li::before { background: var(--cream); }

/* Cross-mark list (pain points) */
.s-xlist { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 28px; }
.s-xlist li { position: relative; padding-left: 60px; font-family: var(--sans); font-size: 40px; line-height: 1.3; }
.s-xlist li::before { content: "\00D7"; position: absolute; left: 0; top: -6px; font-size: 52px; font-weight: 700; color: var(--terracotta); }
.on-ink .s-xlist li::before, .on-terra .s-xlist li::before, .on-sage .s-xlist li::before { color: var(--clay); }