/* =====================================================
   ICB Design System — colors_and_type.css
   Authoritative token source. Matches bemorebookkeeper-v2.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300..900&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────── */
  --icb-navy:       #222B62;   /* primary text, headings, buttons */
  --icb-navy-dark:  #181E44;   /* hover states, depth */
  --icb-red:        #CA2F37;   /* brand accent, sparingly */
  --icb-teal:       #2B718C;   /* legacy secondary accent (retained for compat) */
  --icb-turquoise:  #1FB6B0;   /* v4.1 feature colour — gradient-reset device */
  --icb-cyan:       #70D4E6;   /* light accent / washes */
  --icb-gold:       #F1B127;   /* highlight / editorial marks */

  /* ── Action colour (NOT red) ───────────────────── */
  --aquamarine:      #2DA99D;
  --aquamarine-light:#41C8BD;
  --aquamarine-dark: #228176;

  /* ── Surfaces ──────────────────────────────────── */
  --surface:        #FFFFFF;
  --surface-warm:   #FAFAF7;   /* warm off-white, OK for panels */
  --surface-alt:    #fafbfc;   /* cool off-white, testimonials/quiz-cta */
  --icb-white:      #FAFAF7;   /* v4.1 canonical near-white surface (alias of warm); pairs with --paper-grain */

  /* ── Borders / hairlines ───────────────────────── */
  --hairline:       rgba(34,43,98,0.10);  /* primary separator */
  --hairline-soft:  rgba(34,43,98,0.06);
  --border:         #e5e7eb;
  --border-light:   #f0f0f0;

  /* ── Text ──────────────────────────────────────── */
  --fg-primary:     #222B62;   /* headings */
  --fg-body:        #374151;   /* body copy */
  --fg-muted:       #6b7280;   /* secondary */
  --fg-subtle:      #9ca3af;   /* privacy / footnote */
  --fg-on-dark:     #ffffff;

  /* ── Paper texture (near-white fibre, no lines) ──
     v4.1 dev-notes 06May26w: cream (#F4EEDE) replaced by ICB-white (#FAFAF7).
     The class is still .icb-paper for backwards compat, but reads as a faint
     warm fibre on near-white now, not warm cream. */
  --surface-paper:  #FAFAF7;   /* ICB-white (was #F4EEDE warm cream pre-v4.1 dev-notes) */
  /* --paper-grain is injected via assets/paper-grain.css as an inline base64
     PNG data-URL, so the fibre survives html-to-image captures (cross-origin
     background images are dropped by the renderer). Any file that uses
     .icb-paper must <link> both colors_and_type.css AND assets/paper-grain.css */

  /* ── Radii (editorial = small) ─────────────────── */
  --radius-xs:      2px;
  --radius-sm:      4px;     /* buttons */
  --radius-md:      6px;     /* cards */
  --radius-lg:      12px;    /* form inputs, quiz CTA */

  /* ── Spacing scale ─────────────────────────────── */
  --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:  80px;
  --space-10: 96px;

  /* ── Section padding ───────────────────────────── */
  --section-pad:        80px;
  --section-pad-mobile: 56px;

  /* ── Container widths ──────────────────────────── */
  --container-outer: 1120px;  /* wide */
  --container-max7:  1280px;  /* max-w-7xl quiz */
  --container-max4:  720px;   /* reading column */
  --container-narrow: 760px;

  /* ── Type families ─────────────────────────────── */
  --font-display: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-numeric: 'Roboto', ui-sans-serif, system-ui, sans-serif;

  /* ── Motion ────────────────────────────────────── */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --stagger:    60ms;

  /* ── Shadows (used very sparingly — glow > drop) ─ */
  --glow-aqua:      0 2px 16px rgba(45,169,157,0.35);
  --glow-aqua-lg:   0 4px 24px rgba(45,169,157,0.45);
  --glow-navy:      0 4px 16px rgba(34,43,98,0.30);
  --shadow-card:    0 8px 24px rgba(0,0,0,0.06);

  /* ── Semantic type tokens ──────────────────────── */
  --h1-size:  clamp(2.5rem, 6vw, 5rem);
  --h1-weight: 700;
  --h1-ls:    -0.02em;
  --h1-lh:    1.0;

  --h2-size:  clamp(1.75rem, 4vw, 2.75rem);
  --h2-weight: 700;
  --h2-ls:    -0.02em;
  --h2-lh:    1.2;

  --h3-size:  clamp(1.375rem, 2.5vw, 1.75rem);
  --h3-weight: 700;
  --h3-ls:    -0.02em;
  --h3-lh:    1.25;

  --eyebrow-size:   0.75rem;
  --eyebrow-weight: 700;
  --eyebrow-ls:     0.12em;

  --body-size:      1.0625rem;  /* 17px */
  --body-lh:        1.75;
  --lead-size:      1.125rem;
  --small-size:     0.875rem;
  --footnote-size:  0.8125rem;
}

/* ──────────────────────────────────────────────────
   Element defaults (opt-in via body.icb-type)
   ────────────────────────────────────────────────── */
body.icb-type {
  font-family: var(--font-body);
  color: var(--fg-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1; /* tabular figures for stats */
}

.icb-type h1, .icb-h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  letter-spacing: var(--h1-ls);
  line-height: var(--h1-lh);
  color: var(--fg-primary);
}
.icb-type h2, .icb-h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  letter-spacing: var(--h2-ls);
  line-height: var(--h2-lh);
  color: var(--fg-primary);
}
.icb-type h3, .icb-h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  letter-spacing: var(--h3-ls);
  line-height: var(--h3-lh);
  color: var(--fg-primary);
}
.icb-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--aquamarine);
}
.icb-lead { font-size: var(--lead-size); line-height: 1.7; color: var(--fg-body); }
.icb-body { font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-body); }
.icb-small { font-size: var(--small-size); color: var(--fg-muted); }
.icb-footnote { font-size: var(--footnote-size); color: var(--fg-subtle); }
.icb-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--icb-navy);
}
.icb-numbered {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--aquamarine);
}

/* ── Paper surface — warm fibre, no lines ────────
   Default: warm colour + SVG fractal-noise grain on top.
   Grain is baked with α≈0.08 navy tint so it reads as fibre, not dirt.
   Add .icb-paper--lamp for the optional radial warm vignette
   (use sparingly — hero, quiz-stem, testimonial intros). */
.icb-paper {
  background-color: var(--surface-paper);
  background-image: var(--paper-grain);
  background-repeat: repeat;
}
.icb-paper--lamp {
  background-color: var(--surface-paper);
  background-image:
    var(--paper-grain),
    radial-gradient(ellipse at 50% 42%, #FEFBF1 0%, #FAFAF7 55%, #EFE9D8 100%);
  background-repeat: repeat, no-repeat;
}

/* ── Hairline row separator (NOT cards) ────────── */
.icb-row { border-top: 1px solid var(--hairline); }
.icb-row:last-child { border-bottom: 1px solid var(--hairline); }

/* ── Accent lines used beside numbered blocks ──── */
.icb-accent-line { width: 3px; height: 48px; border-radius: 2px; background: var(--aquamarine); }
.icb-accent-line--gold { background: var(--icb-gold); }
.icb-accent-line--teal { background: var(--icb-teal); }
.icb-accent-line--red  { background: var(--icb-red); }
.icb-accent-line--navy { background: var(--icb-navy); }