/* =========================================================================
   Bliss Drive AI Visibility — Accessible Design Tokens
   Tuned for users 50–60+: larger type, generous spacing, high contrast,
   simpler shadows, calm animations. Light-mode only.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color — Surface & Text (WCAG AA+) ---------- */
  --bg:            #F4F7FB;   /* Page background — soft, not stark white */
  --bg-card:       #FFFFFF;   /* Card surface */
  --bg-hover:      #EEF3F9;   /* Row / button hover */
  --bg-input:      #FFFFFF;
  --bg-subtle:     #F8FAFC;   /* Secondary container */

  --border:        #CBD5E1;   /* Stronger border than the original #E2E8F0 — easier to see */
  --border-light:  #E2E8F0;
  --border-strong: #94A3B8;

  --text:          #0B1220;   /* Near-black, very high contrast */
  --text-muted:    #475569;   /* Was #64748B — darkened for readability */
  --text-dim:      #64748B;   /* Was #94A3B8 — darkened */
  --text-inverse:  #FFFFFF;

  /* ---------- Brand — Bliss Drive ---------- */
  --brand-primary:   #0057E0;   /* Slightly deeper than #0066FF for AA on white */
  --brand-primary-hover: #0047B8;
  --brand-primary-press: #003A99;
  --brand-secondary: #F08700;   /* Slightly deeper than #FF9500 for AA on white */
  --brand-secondary-hover: #D97700;

  --blue:         var(--brand-primary);
  --blue-glow:    rgba(0, 87, 224, 0.10);
  --blue-border:  rgba(0, 87, 224, 0.28);
  --orange:       var(--brand-secondary);
  --orange-glow:  rgba(240, 135, 0, 0.12);
  --orange-border:rgba(240, 135, 0, 0.30);

  /* ---------- Semantic — Status ---------- */
  --green:        #0F8A5F;    /* Was #10B981 — deeper for AA */
  --green-bg:     #E6F5EE;
  --red:          #C9352B;    /* Was #EF4444 — deeper for AA */
  --red-bg:       #FBE9E7;
  --yellow:       #B45309;    /* Amber-dark so text reads on light bg */
  --yellow-bg:    #FEF3C7;
  --gray:         #475569;
  --gray-bg:      #E2E8F0;

  /* ---------- Engine Accents (visual chips) ---------- */
  --engine-chatgpt:    #10A37F;
  --engine-perplexity: #20B2AA;
  --engine-google-aio: #4285F4;
  --engine-gemini:     #8B5CF6;

  /* ---------- Typography — scaled up for 50+ readers ---------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Base size — bumped to 18px per FreshBooks/Chase and 50-60yo research
     (Chatrangsan & Petrie 2019: 18pt significantly faster to read than 14/16) */
  --fs-root: 18px;

  /* Type scale — generous, for comfortable scanning at arm's length */
  --fs-xs:   14px;   /* Absolute floor — captions only */
  --fs-sm:   16px;   /* Secondary / helper — still WCAG-safe */
  --fs-base: 18px;   /* Body — default reading size */
  --fs-md:   20px;   /* Emphasized body / form inputs */
  --fs-lg:   24px;   /* h4 / card title */
  --fs-xl:   28px;   /* h3 */
  --fs-2xl:  36px;   /* h2 */
  --fs-3xl:  44px;   /* h1 */
  --fs-display: 60px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;    /* Comfortable reading line-height */
  --lh-loose: 1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.06em;

  /* ---------- Spacing — generous, based on 4px grid ---------- */
  --space-0:   0;
  --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;

  /* Legacy aliases (Bliss Drive conventions) */
  --spacing-xs:  var(--space-1);
  --spacing-sm:  var(--space-2);
  --spacing-md:  var(--space-4);
  --spacing-lg:  var(--space-6);
  --spacing-xl:  var(--space-10);
  --spacing-xxl: var(--space-16);

  /* ---------- Radii — friendly rounding ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* Default card radius (lifted from 16 for wider surfaces) */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Elevation — subtle, paper-like ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 28px 64px rgba(15, 23, 42, 0.14);
  --shadow-brand: 0 10px 28px rgba(0, 87, 224, 0.22);
  --shadow-brand-orange: 0 10px 28px rgba(240, 135, 0, 0.22);

  /* Focus ring — highly visible for motor accessibility */
  --focus-ring: 0 0 0 3px rgba(0, 87, 224, 0.35), 0 0 0 5px #FFFFFF;

  /* ---------- Motion — calm, no bouncy easings ---------- */
  --transition-fast:   150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow:   320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Hit targets ---------- */
  --hit-target-min: 44px;   /* Every interactive element */
  --hit-target-lg:  52px;   /* Primary CTAs */

  /* ---------- Glass & overlay ---------- */
  --glass-bg:     rgba(255, 255, 255, 0.92);
  --glass-blur:   blur(12px);
  --glass-border: rgba(15, 23, 42, 0.06);
  --scrim:        rgba(15, 23, 42, 0.55);
}

/* ==========================================================================
   Semantic / element styles — consumers can just use these classes/tags.
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-root);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0;
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  margin: 0;
}

.body-lg { font-size: var(--fs-md); }
.body-sm { font-size: var(--fs-sm); color: var(--text-muted); }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.caption {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

a {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

button, input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

::selection { background: var(--blue-glow); color: var(--text); }

/* ==========================================================================
   Brand lockup helper — small "AI First Brand Audit" tagline shown next to
   the Bliss Drive wordmark in the topbar + footer. Hidden on tight phones to
   keep the topbar uncluttered; the page title still tells visitors which
   product they're in.
   ========================================================================== */
.brand-product {
  display: inline-flex; align-items: center;
  padding-left: 12px; margin-left: 4px;
  border-left: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .brand-product { display: none; }
}