/* =============================================================
   Chatterkick Design System — colors & type
   ------------------------------------------------------------
   Brand DNA: bold black backgrounds, confident white type,
   pink (#B11871) used sparingly — logo, CTAs, underline
   accents, key highlights. Tan Aegean for editorial display
   moments; Montserrat for everything else.
   ============================================================= */

/* -------- Fonts -------- */
@font-face {
  font-family: "TAN Aegean";
  src: url("fonts/TAN-AEGEAN-Regular.woff2") format("woff2"),
       url("fonts/TAN-AEGEAN-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Core palette -------- */
  --ck-black: #000000;           /* primary canvas / hero */
  --ck-off-black: #0a0a0a;       /* cards on black */
  --ck-ink: #111111;             /* body text on light */
  --ck-white: #ffffff;
  --ck-paper: #fafafa;           /* light sections */
  --ck-line: #e6e6e6;            /* hairlines on light */
  --ck-line-dark: #1f1f1f;       /* hairlines on dark */

  /* -------- Brand pink (use SPARINGLY: logo, 1 CTA, accents) -------- */
  --ck-pink-900: #6d0a47;        /* deep form bands */
  --ck-pink-800: #910c5d;        /* dark pink block */
  --ck-pink-700: #b11871;        /* ← BRAND MARK / primary pink */
  --ck-pink-600: #c4488e;        /* hover / lighter fills */
  --ck-pink-300: #f2c0db;        /* soft tints, rare */

  /* -------- Secondary accents (deck + detail use only) -------- */
  --ck-purple-900: #1a1a5e;      /* deep purple band */
  --ck-purple-700: #2f2fa2;      /* purple mid */
  --ck-purple-500: #5352d4;      /* deck accent */
  --ck-yellow: #DEE22A;           /* primary accent — TAN color, brush strokes, yellow buttons */
  --ck-lime: #DEE22A;              /* alias — same as yellow, kept for legacy references */
  --ck-cyan: #2ecbe0;             /* deck "Idea 3" */
  --ck-mint: #7dd3a0;             /* rare, deck idea colors */
  --ck-handwritten-blue: #7CCFF2; /* handwritten notes / doodles — works on light & dark */

  /* -------- Semantic performance colors (dashboards, reports, alerts) --
     Rule: LIMIT red. Prefer WARNING-yellow for "needs attention."          */
  --ck-success:   #15b914;        /* positive performance, trending up */
  --ck-warning:   #DEE22A;        /* needs attention / underperforming */
  --ck-danger:    #E05A5A;        /* ONLY for true negative / critical alerts */
  --ck-muted:     #9AA0A6;        /* neutral / "no change" */

  /* -------- Semantic pairs: tint surface + legible text ------------------
     The raw semantic colors above are FILLS. None of them are readable as
     text on white. Each role therefore carries a pale tint for the surface
     and a darker same-family color for the text and icon sitting on it.
     Use on callout tiles, delta pills, status chips, KPI states — in
     reports, dashboards, and decks alike.                                  */
  --ck-success-tint: #E4F7E1;     /* pale green surface — wins, on-target */
  --ck-success-text: #067D0E;     /* deeper brand green — legible on white AND on the tint */
  --ck-warning-tint: #F6F7CE;     /* pale yellow surface — watch, underperforming */
  --ck-warning-text: #6A6C00;     /* dark olive drawn from brand yellow */
  --ck-warning-edge: #c2c621;     /* 1px inset edge so a --ck-warning fill reads on white */
  --ck-danger-tint:  #F7E3E3;     /* pale red surface — true negatives only */
  --ck-danger-text:  #A32D2D;     /* deeper red — legible on white AND on the tint */

  /* -------- Chart series ------------------------------------------------
     Use in order; add variations only if you need more. These double as
     ACCENT COLORS inside a report or dashboard — category chips, icon
     tiles, section rules, underlines — anywhere you need a non-semantic
     color that is not pink. Pink stays identity-only, never data.          */
  --chart-1: #3B5BDB;             /* blue — primary series */
  --chart-2: #14B8A6;             /* teal */
  --chart-3: #F97316;             /* orange */
  --chart-4: #A78BFA;             /* lavender */
  --chart-5: #9AA0A6;             /* neutral gray */

  /* Sentiment in charts (gauges, stacked sentiment bars) — aliases only,
     no new colors. Reference the intent, not the hex.                      */
  --chart-positive: var(--ck-success);
  --chart-neutral:  var(--ck-muted);
  --chart-negative: var(--ck-danger);

  /* -------- Document surface ladder (light deliverables) ----------------
     The three-step neutral ladder for ANY light deliverable surface,
     whatever its density — a research report, a data-heavy dashboard, a
     one-pager. Section contrast comes from small lifts plus a hairline,
     never from color blocks. Values lifted from the exec-social report
     kit, which is where the pattern was proven.                           */
  --paper-page:  #F1F0EC;         /* outermost canvas behind the sheet */
  --paper-sheet: var(--ck-paper);  /* the document itself — aliased so the system has ONE off-white */
  --paper-card:  #ffffff;         /* cards and panels inside the sheet */
  --paper-line:  #ECEBE8;         /* 0.5px hairlines: sheet edge, card edge, section rules */
  --paper-band:  #1A1A1A;         /* soft-black closing band — small and inset, never full-bleed */

  /* -------- Section lift: very subtle gradient off-white -----------------
     Use for depth between modules. Target white, nudge toward --lift-tint. */
  --lift-tint: #f2ebf2;
  --lift-gradient: linear-gradient(180deg, #ffffff 0%, var(--lift-tint) 100%);

  /* -------- Semantic: foreground -------- */
  --fg1: var(--ck-white);         /* primary on dark (default canvas) */
  --fg2: #d4d4d4;                 /* secondary on dark */
  --fg3: #8a8a8a;                 /* tertiary on dark */
  --fg1-ink: var(--ck-ink);       /* primary on light */
  --fg2-ink: #404040;             /* secondary on light */
  --fg3-ink: #6b6b6b;             /* tertiary on light */

  /* -------- Semantic: surface -------- */
  --bg-canvas: var(--ck-black);
  --bg-surface: var(--ck-off-black);
  --bg-surface-light: var(--ck-paper);
  --bg-accent: var(--ck-pink-700);

  /* -------- Semantic: interactive -------- */
  --action-bg: var(--ck-pink-700);
  --action-bg-hover: var(--ck-pink-600);
  --action-fg: var(--ck-white);
  --link: var(--ck-pink-700);
  --link-hover: var(--ck-pink-600);

  /* -------- Type families -------- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "TAN Aegean", "Playfair Display", Georgia, serif;

  /* -------- Type scale (web, per brand guide) -------- */
  --h1-size: 80px;   /* Montserrat ExtraBold, ALL CAPS */
  --h2-size: 64px;   /* Montserrat Bold */
  --h3-size: 32px;   /* Montserrat Bold */
  --h4-size: 20px;   /* Montserrat Medium, ALL CAPS */
  --body-size: 16px; /* Montserrat Medium, Sentence case (14 min) */
  --micro-size: 12px;

  /* Presentation scale (decks, 1920×1080) */
  --deck-headline: 120px;  /* Montserrat Bold, 80pt ≈ 107px, but larger works @1080 */
  --deck-subhead: 48px;
  --deck-sec-sub: 34px;
  --deck-body: 24px;
  --deck-display: 140px;   /* TAN Aegean moments */

  /* Content scale (structured, information-dense deliverables) ------------
     For long-form reading, research, analysis, educational content, case
     studies, reports, guides, and dense web layouts — anywhere readability
     and hierarchy matter more than expressive display styling. Each step
     lists weight / line-height / tracking; hold all four values together.  */
  --content-title:      36px;    /* 700 · 1.08 · -0.02em */
  --content-section:    26px;    /* 700 · 1.15 · -0.01em */
  --content-subsection: 20px;    /* 600 · 1.25 · -0.005em */
  --content-body:       16px;    /* 400 · 1.45 · 0 */
  --content-supporting: 12.5px;  /* 400 · 1.5 · 0 — use a secondary text color */
  --content-label:      10px;    /* 600 · 1.3 · 0.03em — labels only, never paragraphs */

  /* -------- Spacing -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* -------- Radii -------- */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 14px;    /* cards */
  --radius-4: 22px;    /* image tiles on site */
  --radius-pill: 999px;

  /* -------- Shadows -------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --shadow-pink: 0 10px 30px rgba(177,24,113,.28);
  --shadow-lift: 0 24px 60px rgba(0,0,0,.35);

  /* -------- Borders -------- */
  --border-thin: 1px solid var(--ck-line);
  --border-thin-dark: 1px solid var(--ck-line-dark);
  --border-accent: 2px solid var(--ck-pink-700);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html { color: var(--fg1-ink); background: var(--ck-white); }
body {
  font-family: var(--font-sans);
  font-weight: 500;               /* Medium is the Chatterkick body weight */
  font-size: var(--body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings ---- */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;               /* ExtraBold */
  font-size: var(--h1-size);
  line-height: .95;
  letter-spacing: -0.01em;
  /* Upper/lower or Sentence case only — no ALL CAPS headlines in this system */
  margin: 0;
}

/* Caps belong to eyebrows and small labels only, never headlines. */
.allcaps { text-transform: uppercase; }

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;               /* Bold */
  font-size: var(--h2-size);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: 1.15;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--h4-size);
  line-height: 1.2;
  letter-spacing: 0.08em;
  /* Title Case by default; add .allcaps for eyebrows */
  margin: 0;
}

p { margin: 0 0 1em 0; }
strong, b { font-weight: 700; }

/* ---- Display (TAN Aegean) ---- */
.display, .tan {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;             /* UPRIGHT — per brand, not italic */
  line-height: 1.0;
  letter-spacing: 0;
  /* Use for: one word/phrase moments like "Report", "You.", "Messy" */
}

/* ---- Utility text ---- */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ck-pink-700);
}

.micro { font-size: var(--micro-size); color: var(--fg3-ink); }

/* ---- Links ---- */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* ---- On dark surfaces ---- */
.on-dark { color: var(--fg1); background: var(--bg-canvas); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg1); }
.on-dark a { color: var(--ck-white); text-decoration-color: var(--ck-pink-700); }
.on-dark a:hover { color: var(--ck-pink-600); }

/* ---- The signature pink underline accent ---- */
.ck-underline {
  background-image: linear-gradient(var(--ck-pink-700), var(--ck-pink-700));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  padding-bottom: 2px;
}