/* ============================================================
   BLANKET DESIGN SYSTEM — TOKENS
   Single source of truth. NO raw hex/px in any page file.
   Source: Figma "Final New Website Design" (11226:7846) +
   AI Designer design-system.md (Design Language v1).
   ============================================================ */

:root {
  /* ---------- Brand & product colors ---------- */
  --bh-pink: #F24476;            /* Blanket Pink — brand accent, PM product, all non-product pages */
  --bh-pink-deep: #D6205A;       /* AA-tuned pink for small text links on white */
  --bh-violet: #A855F7;          /* Super CRM */
  --bh-violet-deep: #7C3AED;     /* AA-tuned violet */
  --bh-green: #10AA86;           /* Super BDM */
  --bh-green-deep: #0B8367;      /* AA-tuned green (boxes / small text on white) */
  --bh-blue: #3B82F6;            /* Super Broker */
  --bh-blue-deep: #2563EB;       /* AA-tuned blue */
  --bh-bundle: #362642;          /* Bundle deep purple */

  /* ---------- Surfaces ---------- */
  --bh-white: #FFFFFF;
  --bh-bg: #FFFFFF;              /* default page bg (white + grain overlay) */
  --bh-bg-soft: #F5F7FA;         /* soft grey panel bg */
  --bh-bg-cream: #F0ECE4;        /* warm interlude bands / bright CTA */
  --bh-bg-grey-ui: #F5F6F8;      /* product-UI screenshot container */
  --bh-dark: #2A1B2E;            /* AI-dark theme bg / dark bands */
  --bh-navy: #1A1A2E;            /* footer + dark CTA bg */
  --bh-space-black: #05060D;     /* near-black space band (earth/trust) */

  /* ---------- Text ---------- */
  --bh-ink: #1A1A2E;             /* light-theme headings / primary text */
  --bh-heading-purple: #362642;  /* alt heading on light */
  --bh-body: #6B7280;            /* light-theme body grey */
  --bh-body-on-dark: rgba(255,255,255,0.70);
  --bh-white-85: rgba(255,255,255,0.85);
  --bh-lavender: #c4cae3;        /* muted lavender — product names in headlines */

  /* ---------- Borders & lines ---------- */
  --bh-border: #E5E7EB;
  --bh-border-soft: #DDE1E7;
  --bh-border-chip: #dedfe7;
  --bh-border-pill: #ECEEF3;
  --bh-divider-grey: #E6E8EF;
  --bh-border-on-dark: rgba(255,255,255,0.10);
  --bh-divider-on-dark: rgba(255,255,255,0.12);

  /* ---------- Typography ---------- */
  --bh-font-display: 'Figtree', 'Inter', system-ui, sans-serif;   /* text >= 26px */
  --bh-font-body: 'Hanken Grotesk', 'Inter', system-ui, sans-serif; /* text < 26px */

  /* Desktop type ramp */
  --bh-fs-hero-centered: 96px;   --bh-ls-hero-centered: -4px;   /* Home / About hero */
  --bh-fs-hero-split: 76px;      --bh-ls-hero-split: -2px;      /* product / tool heroes */
  --bh-fs-h2: 56px;              --bh-ls-h2: -2px;              /* section headlines */
  --bh-fs-h3: 44px;              --bh-ls-h3: -1.5px;            /* feature-card titles */
  --bh-fs-h4: 30px;              --bh-ls-h4: -0.5px;
  --bh-fs-card-title: 26px;
  --bh-fs-lead: 19px;            /* hero sub / section sub */
  --bh-fs-body: 15.5px;
  --bh-fs-body-sm: 14px;
  --bh-fs-fine: 13px;
  --bh-fs-eyebrow: 14px;         --bh-ls-eyebrow: 2px;          /* Hanken ExtraBold uppercase */

  /* Mobile type ramp (≤767px) */
  --bh-m-fs-hero: 34px;  /* Figma says 36, but browser Figtree renders ~4% wider — 34 preserves the designed 2-line hero break in 350px */
  --bh-m-fs-h2: 28px;
  --bh-m-fs-h3: 22px;
  --bh-m-fs-lead: 16.5px;
  --bh-m-fs-body: 14.5px;
  --bh-m-fs-eyebrow: 11px;       --bh-m-ls-eyebrow: 1.2px;

  /* Weights */
  --bh-w-black: 900;             /* Figtree Black — heroes/headlines */
  --bh-w-xbold: 800;
  --bh-w-bold: 700;
  --bh-w-semibold: 600;
  --bh-w-medium: 500;
  --bh-w-regular: 400;

  /* Line heights */
  --bh-lh-tight: 1.04;           /* heroes */
  --bh-lh-heading: 1.12;
  --bh-lh-body: 1.55;
  --bh-lh-lead: 1.45;

  /* ---------- Spacing ---------- */
  --bh-space-4: 4px;   --bh-space-8: 8px;   --bh-space-12: 12px;
  --bh-space-16: 16px; --bh-space-20: 20px; --bh-space-24: 24px;
  --bh-space-30: 30px; --bh-space-32: 32px; --bh-space-36: 36px; --bh-space-40: 40px;
  --bh-space-48: 48px; --bh-space-60: 60px; --bh-space-80: 80px;
  --bh-space-100: 100px; --bh-space-120: 120px; --bh-space-150: 150px;

  --bh-section-rhythm: 150px;    /* desktop gap between sections */
  --bh-m-section-rhythm: 80px;   /* mobile: 40 + 40 per adjacent section */
  --bh-content-width: 1280px;    /* content column */
  --bh-page-margin: 80px;        /* desktop page margins */
  --bh-m-page-margin: 24px;      /* mobile page margins (390 - 342 content) — matches every Figma mobile frame incl. Home (was 20px, a build-side invention) */
  --bh-narrow-width: 880px;      /* section-header / reading column */
  --bh-reading-width: 740px;     /* blog post body column */

  /* ---------- Radius (scale: 8/12/16/20 ONLY; r6 chips as found in final Figma) ---------- */
  --bh-r-6: 6px;                 /* category pills, ADD-ON chips (per final Figma) */
  --bh-r-8: 8px;                 /* tags, integration chips (mobile) */
  --bh-r-btn: 8px;               /* ALL buttons/CTAs — per final Figma v2 pages (supersedes older r12 rule) */
  --bh-r-12: 12px;               /* inputs, chips, highlight box, hero pill, dark cards */
  --bh-r-16: 16px;               /* content cards, testimonials, accordion */
  --bh-r-20: 20px;               /* feature/plan cards, hero surfaces, banners */
  --bh-r-pill: 999px;            /* filter chips / category pills */

  /* ---------- Shadows ---------- */
  --bh-shadow-card: 0px 4px 12px rgba(23,55,113,0.08);  /* standard card / primary button (Figma final) */
  --bh-shadow-btn-sm: 0px 4px 6px rgba(23,55,113,0.08); /* nav CTA / mobile testimonial card */
  --bh-caret-grey: #8C94A6;
  --bh-footer-text: rgba(244,242,248,0.75);
  --bh-space-56: 56px;
  --bh-shadow-soft: 0px 6px 18px rgba(23,55,113,0.08);
  /* Vayu 3-layer lift — outer card containers ONLY, never inner boxes */
  --bh-shadow-lift:
    -4px 14px 33px rgba(27,8,8,0.06),
    0px 20px 55px rgba(27,8,8,0.05),
    0px 24px 78px rgba(27,8,8,0.03);
  --bh-shadow-nav: 0px 1px 0px var(--bh-border), 0px 4px 16px rgba(23,55,113,0.05);
  --bh-shadow-tile:
    0px 6px 16px rgba(28,23,41,0.16),
    0px 2px 6px rgba(28,23,41,0.07);   /* nav icon tiles - DESKTOP (96px dropdown tiles) */
  --bh-shadow-tile-mobile:
    0px 2px 8px rgba(28,23,41,0.12),
    0px 1px 2px rgba(28,23,41,0.06);   /* nav icon tiles - MOBILE (44-46px). Re-derived for
                                          the smaller tile, NOT the desktop shadow reused. */

  /* ---------- Motion ---------- */
  --bh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bh-dur-fast: 150ms;          /* hovers */
  --bh-dur-med: 250ms;           /* accordions, tabs */
  --bh-dur-reveal: 450ms;        /* scroll reveals */
  --bh-dur-enter: 200ms;         /* panels opening */
  --bh-dur-exit: 120ms;          /* panels closing - exits are faster than enters */
  --bh-reveal-rise: 14px;
  --bh-reveal-stagger: 70ms;

  /* ---------- Breakpoints (reference — used in media queries) ----------
     --bh-bp-mobile: 390px;  --bh-bp-tablet: 768px;
     --bh-bp-laptop: 1024px; --bh-bp-desktop: 1440px;
     (CSS custom properties can't drive @media; keep these in sync manually) */

  /* ---------- Z-index ---------- */
  --bh-z-nav: 100;
  --bh-z-dropdown: 110;
  --bh-z-mobile-menu: 120;
  --bh-z-grain: 1;               /* grain overlay sits above bg, below content */
}

/* Per-page accent theming: set on <body> (e.g. <body class="theme-crm">).
   Components reference var(--bh-accent) / var(--bh-accent-deep). */
:root, .theme-pink { --bh-accent: var(--bh-pink);   --bh-accent-deep: var(--bh-pink-deep); }
.theme-crm        { --bh-accent: var(--bh-violet);  --bh-accent-deep: var(--bh-violet-deep); }
.theme-bdm        { --bh-accent: var(--bh-green);   --bh-accent-deep: var(--bh-green-deep); }
.theme-pm         { --bh-accent: var(--bh-pink);    --bh-accent-deep: var(--bh-pink-deep); }
.theme-broker     { --bh-accent: var(--bh-blue);    --bh-accent-deep: var(--bh-blue-deep); }

/* ---------- Fonts (self-hosted variable, latin subset) ---------- */
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   LEGACY (BLOG) TOKENS — appended during the static-build port
   (2026-08-28). Everything ABOVE this line is the studio design
   system (blanket-site-redesign/design-system/tokens.css) and is
   the site-wide truth — studio wins on any name conflict.
   The tokens below exist ONLY because the blog templates and the
   pre-port .astro components still reference them (verified by
   grepping src/ for var(--bh-…)). Names that the studio system
   also defines (--bh-font-*, --bh-space-4/8/16/24/32/48/150,
   --bh-shadow-card/soft/lift, --bh-accent, --bh-accent-deep,
   --bh-ease) are NOT repeated here — the studio values apply.
   Remove entries as the blog is restyled in Phase 3.
   ============================================================ */

:root {
  --bh-color-pink: #f24476;
  --bh-color-green-money: #10aa86;
  --bh-color-violet-crm: #a855f7;
  --bh-color-purple-bg: #2a1b2e;
  --bh-color-deep-purple: #362642;
  --bh-color-lavender: #c4cae3;
  --bh-color-marketplace-blue: #3b82f6;

  --bh-accent-deep-pink: #d6205a;
  --bh-accent-deep-green: #0b8367;
  --bh-accent-deep-blue: #2563eb;
  --bh-accent-deep-violet: #7c3aed;

  --bh-product-crm: var(--bh-color-violet-crm);
  --bh-product-bdm: var(--bh-color-green-money);
  --bh-product-pm: var(--bh-color-pink);
  --bh-product-broker: var(--bh-color-marketplace-blue);
  --bh-product-bundle: var(--bh-color-deep-purple);

  --bh-text-ink: #1a1a2e;
  --bh-text-body-grey: #6b7280;
  --bh-text-body-grey-dark: rgb(255 255 255 / 0.7);

  --bh-surface-white: #ffffff;
  --bh-surface-grey: #f5f7fa;
  --bh-surface-chip: #f2f2f5;
  --bh-hairline: #e7e9f1;

  --bh-text-article: #333847;
  --bh-surface-note: #f3f3f3;
  --bh-surface-cta-dark: #28182e;
  --bh-text-on-cta: #d1ccdb;
  --bh-text-body-grey-aa: color-mix(in srgb, var(--bh-text-body-grey) 82%, var(--bh-text-ink));
  --bh-divider-dark: rgb(255 255 255 / 0.12);
  --bh-scrim-ink: #05030a;
  --bh-cta-band-mid: #952a49;
  --bh-text-on-cta-band: #d4cfe0;

  --bh-space-64: 4rem;
  --bh-space-96: 6rem;

  --bh-radius-8: 0.5rem;
  --bh-radius-12: 0.75rem;
  --bh-radius-16: 1rem;
  --bh-radius-20: 1.25rem;
  --bh-radius-pill: 999px;

  --bh-radius-btn: var(--bh-radius-8);
  --bh-radius-chip: var(--bh-radius-8);
  --bh-radius-input: var(--bh-radius-12);
  --bh-radius-card: var(--bh-radius-16);
  --bh-radius-feature: var(--bh-radius-20);

  --bh-weight-regular: 400;
  --bh-weight-medium: 500;
  --bh-weight-semibold: 600;
  --bh-weight-bold: 700;
  --bh-weight-extrabold: 800;
  --bh-weight-black: 900;

  --bh-border-dark-card: 1px solid rgb(255 255 255 / 0.1);

  --bh-accent-on-primary: var(--bh-color-pink);
  --bh-accent-dark: #521728;

  --bh-container: 90rem;
  --bh-page-gutter: 5rem;
  --bh-gutter: 1.25rem;
  --bh-section-y: var(--bh-space-64);

  --bh-tap-min: 2.75rem;
  --bh-duration: 180ms;

  --bh-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Blog layout (Base.astro) sets data-accent on <html>; the studio system uses
   .theme-* classes on <body>. Both live here so each surface keeps working. */
[data-accent='pm'] {
  --bh-accent: var(--bh-color-pink);
  --bh-accent-deep: var(--bh-accent-deep-pink);
  --bh-accent-on-primary: var(--bh-color-pink);
}

[data-accent='crm'] {
  --bh-accent: var(--bh-color-violet-crm);
  --bh-accent-deep: var(--bh-accent-deep-violet);
  --bh-accent-on-primary: var(--bh-color-violet-crm);
  --bh-accent-dark: #421f51;
}

[data-accent='bdm'] {
  --bh-accent: var(--bh-color-green-money);
  --bh-accent-deep: var(--bh-accent-deep-green);
  --bh-accent-on-primary: var(--bh-color-green-money);
  --bh-accent-dark: #173732;
}

[data-accent='broker'] {
  --bh-accent: var(--bh-color-marketplace-blue);
  --bh-accent-deep: var(--bh-accent-deep-blue);
  --bh-accent-on-primary: var(--bh-color-marketplace-blue);
  --bh-accent-dark: #232c51;
}

@media (min-width: 64rem) {
  :root {
    --bh-gutter: var(--bh-page-gutter);
    --bh-section-y: var(--bh-space-96);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bh-duration: 0ms;
  }
}