/* ============================================================
   BookReady design tokens — SINGLE SOURCE OF TRUTH
   Generated from docs/design-system/tokens/* (the Claude Design
   handoff). Loaded site-wide via services/marketing_chrome.py.
   Defines the canonical --br-* tokens PLUS the unprefixed aliases
   (--navy, --paper, …) the existing pages already reference, at
   identical values — so pages can drop their inline :root blocks
   over time with no visual change.
   ============================================================ */

/* BookReady webfonts
   ------------------------------------------------------------------
   Two families, both from Google Fonts (matches production):
   - Playfair Display — high-contrast transitional serif. The wordmark,
     all display headings, and italic emphasis.
   - Plus Jakarta Sans — humanist geometric sans. All body, UI, labels.
   Loaded via Google Fonts so the @font-face declarations live upstream
   and stay version-pinned to the weights production actually ships. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================================
   BookReady — Color tokens
   ------------------------------------------------------------
   The palette comes straight from the production landing page.
   Mental model: warm "paper" surfaces (cream/sand) for daylight
   content, a deep "navy" for hero + footer drama, and a
   gold→coral gradient as the single signature accent. Teal is
   the secondary accent reserved for the cover-tools family.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --br-navy:        #0b1929;  /* hero, footer, dark sections, primary text-on-light */
  --br-navy-2:      #1a3550;  /* navy gradient partner, raised dark surfaces */
  --br-ink:         #1a1208;  /* warmest near-black — primary body text */
  --br-ink-2:       #3d3028;  /* secondary text on paper */

  /* ---- Paper surfaces (warm) ---- */
  --br-paper:       #fdf6ec;  /* lightest cream — page background */
  --br-sand:        #fdf6ec;  /* alias of paper */
  --br-sand-2:      #f5ebd9;  /* deeper cream — alternating section bands, chips */
  --br-cream:       #f5ebd9;  /* alias of sand-2 */
  --br-white:       #ffffff;  /* cards, inputs */

  /* ---- Signature accent: gold → coral ---- */
  --br-gold:        #d4a843;  /* gradient start, gold accents, Pro tier */
  --br-gold-2:      #f0c96a;  /* lighter gold — eyebrow text on navy */
  --br-coral:       #e8622a;  /* gradient end, the "hot" accent + emphasis italic */
  --br-accent:      #e8622a;  /* alias of coral — the primary CTA color */

  /* ---- Secondary accent: teal (cover tools) ---- */
  --br-teal:        #1aada8;  /* cover-tool CTAs, focus rings */
  --br-teal-2:      #2ec9c3;  /* teal gradient partner */

  /* ---- Neutrals & lines ---- */
  --br-muted:       #8a7a6a;  /* warm gray — captions, meta, placeholders */
  --br-border:      #e8ddd0;  /* warm hairline on paper */
  --br-border-cool: #e8e6e0;  /* neutral hairline inside the app surfaces */

  /* ---- Semantic status ---- */
  --br-green:       #22c55e;  /* pass / success accent */
  --br-green-ink:   #166534;  /* pass text */
  --br-green-bg:    #dcfce7;  /* pass chip background */
  --br-green-soft:  #f0fdf4;  /* auto-fix callout background */
  --br-red:         #dc2626;  /* fail accent */
  --br-red-ink:     #991b1b;  /* fail text */
  --br-red-bg:      #fee2e2;  /* fail chip background */
  --br-amber:       #f59e0b;  /* warning / stars */
  --br-amber-ink:   #92400e;  /* warning text */
  --br-amber-bg:    #fef3c7;  /* warning chip / info background */
  --br-blue-bg:     #dbeafe;  /* running / in-progress chip */
  --br-blue-ink:    #1e40af;  /* running text */
  --br-trustpilot:  #00b67a;  /* Trustpilot verified green */

  /* ---- Signature gradients ---- */
  --br-grad-accent: linear-gradient(135deg, var(--br-gold), var(--br-coral));
  --br-grad-teal:   linear-gradient(135deg, var(--br-teal), var(--br-teal-2));
  --br-grad-navy:   linear-gradient(135deg, var(--br-navy), var(--br-navy-2));

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-page:    var(--br-paper);
  --surface-band:    var(--br-sand-2);
  --surface-card:    var(--br-white);
  --surface-dark:    var(--br-navy);
  --text-strong:     var(--br-ink);
  --text-body:       var(--br-ink-2);
  --text-muted:      var(--br-muted);
  --text-on-dark:    rgba(255,255,255,.88);
  --text-on-dark-dim:rgba(255,255,255,.6);
  --line:            var(--br-border);
  --focus-ring:      var(--br-teal);
}

/* ============================================================
   BookReady — Typography tokens
   ------------------------------------------------------------
   Two-family system:
   - Playfair Display (serif)  → display, headings, italic emphasis,
     pull-quotes, big price numerals. High-contrast, editorial.
   - Plus Jakarta Sans (sans)  → body, UI, labels, eyebrows, buttons.
   Display sizes use clamp() so heroes scale on the real site.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Semantic family aliases */
  --font-display: var(--font-serif);  /* headings, hero, quotes */
  --font-body:    var(--font-sans);   /* paragraphs, UI */

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */ /* hero sub-copy, airy paragraphs */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */ /* labels, list items, nav-cta */
  --fw-semibold: 600; /* @kind font */ /* buttons, eyebrows, strong labels */
  --fw-bold:     700; /* @kind font */ /* display headings, price numerals */
  --fw-black:    900; /* @kind font */ /* rare — hero superlatives */

  /* ---- Display scale (Playfair, fluid) ---- */
  --text-hero:    clamp(2.4rem, 4vw, 3.2rem);   /* hero H1 */
  --text-h1:      clamp(1.8rem, 3vw, 2.4rem);   /* section titles */
  --text-h2:      clamp(1.55rem, 3.2vw, 2.05rem);
  --text-h3:      1.5rem;                        /* card titles */
  --text-price:   3rem;                          /* pricing numerals */

  /* ---- Body / UI scale (Jakarta, fixed) ---- */
  --text-lead:    17px;   /* hero sub, lead paragraphs */
  --text-base:    16px;   /* body default */
  --text-md:      15px;   /* dense body, CTA labels */
  --text-sm:      14px;   /* secondary text, list items */
  --text-xs:      13px;   /* meta, nav links, captions */
  --text-2xs:     12px;   /* eyebrows, tiny labels */
  --text-micro:   11px;   /* badges, tier pills, legal */

  /* ---- Line heights ---- */
  --lh-tight:   1.15; /* @kind font */ /* display headings */
  --lh-snug:    1.3;  /* @kind font */ /* subheads */
  --lh-normal:  1.5;  /* @kind font */ /* UI, list items */
  --lh-relaxed: 1.6;  /* @kind font */ /* body copy */
  --lh-loose:   1.75; /* @kind font */ /* long-form paragraphs */

  /* ---- Letter spacing ---- */
  --ls-tight:   -.5px; /* @kind font */ /* large display */
  --ls-snug:    -.3px; /* @kind font */ /* headings */
  --ls-normal:  0;     /* @kind font */
  --ls-wide:    .5px;  /* @kind font */ /* small caps labels */
  --ls-eyebrow: 1.5px; /* @kind font */ /* uppercase eyebrows */
}

/* ============================================================
   BookReady — Spacing, radius, shadow, motion tokens
   ------------------------------------------------------------
   Spacing is a soft 4px-ish scale but mirrors the real site's
   actual rem rhythm (1rem, 1.25rem, 1.5rem, 2rem section gaps).
   Radii skew generous-but-not-pill: cards 10–14px, buttons 8px,
   chips fully round. Shadows are soft, low-opacity, warm-black.
   ============================================================ */

:root {
  /* ---- Spacing 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;   /* section vertical padding (5rem) */

  /* Semantic spacing */
  --gap-inline:   14px;  /* hero action rows, button groups */
  --pad-card:     24px;  /* standard card padding (1.5rem) */
  --pad-section:  80px;  /* section block padding */
  --maxw-content: 1100px;/* marketing content column */
  --maxw-app:     760px; /* tool / app column */
  --maxw-prose:   640px; /* readable paragraph measure */

  /* ---- Radius ---- */
  --radius-xs:   5px;   /* nav shield, tiny chips */
  --radius-sm:   6px;   /* nav cta, small stats */
  --radius-md:   8px;   /* buttons, inputs */
  --radius-lg:   10px;  /* check cards, tcards */
  --radius-xl:   12px;  /* price cards, app cards */
  --radius-2xl:  14px;  /* feature / tool cards, mock window */
  --radius-pill: 100px; /* eyebrows, badges, platform tabs */

  /* ---- Borders ---- */
  --border-hair:  1px solid var(--br-border);
  --border-card:  1.5px solid var(--br-border);
  --border-focus: 2px solid var(--br-gold);

  /* ---- Shadows (soft, warm) ---- */
  --shadow-xs:  0 1px 2px rgba(11,25,41,.04);
  --shadow-sm:  0 4px 16px rgba(0,0,0,.06);
  --shadow-md:  0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12);
  --shadow-card:0 8px 40px rgba(0,0,0,.08);   /* the "mock window" lift */
  --shadow-cta: 0 4px 16px rgba(232,98,42,.3); /* coral glow under primary CTA */
  --shadow-cta-hover: 0 8px 28px rgba(232,98,42,.45);
  --shadow-teal:0 4px 14px rgba(26,173,168,.25);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-std:   ease;                     /* @kind other */
  --dur-fast:   .15s;                      /* @kind other */
  --dur-base:   .2s;                       /* @kind other */
  --dur-slow:   .5s;                       /* @kind other */
  /* Signature hover: lift -2px + deepen shadow. Press: settle back to 0. */
  --hover-lift: translateY(-2px);          /* @kind other */
}


/* ============================================================
   Compatibility aliases — the unprefixed names the existing
   hand-built pages already use, mapped to the canonical --br-*
   values above (identical values, so no visual change). Lets a
   page drop its inline :root and rely on this file instead.
   ============================================================ */
:root {
  --navy:   var(--br-navy);
  --navy2:  var(--br-navy-2);
  --ink:    var(--br-ink);
  --ink2:   var(--br-ink-2);
  --paper:  var(--br-paper);
  --sand:   var(--br-sand);
  --sand2:  var(--br-sand-2);
  --cream:  var(--br-cream);
  --accent: var(--br-accent);
  --coral:  var(--br-coral);
  --teal:   var(--br-teal);
  --teal2:  var(--br-teal-2);
  --gold:   var(--br-gold);
  --gold2:  var(--br-gold-2);
  --muted:  var(--br-muted);
  --border: var(--br-border);
  --white:  var(--br-white);
  --green:  #22c55e;
}