/* bloom-site.css — Grab All Files landing page "Bloom" repalette
   Additive & reversible: redefines the site's own tokens. No markup/JS changes.
   Remove the <link> that pulls this file in to fully revert. */

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

:root {
  --font-display: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --bg: #FBF5EF; --surface: #FFFFFF; --surface-alt: #FBF6F1; --surface-soft: #F5EDE4; --surface-deep: #EFE6DB;
  --text: #2A241E; --text-strong: #1A140E; --text-muted: #6B5F52; --text-faint: #8A7D6E;
  --border: #F0E8DF; --border-strong: #E8DCCF;

  --primary: #4B66E1; --primary-hover: #3A54CC; --primary-text: #ffffff;
  --accent-soft: #E9ECFB; --accent-soft-text: #37489E; --accent-icon: #4B66E1;
  --check: #1B7F55;

  --footer-bg: #241F1A; --footer-text: #C3B8AA; --footer-link: #AEB8FF; --footer-border: #3A332B; --footer-meta: #9A8F80; --footer-h: #FBF6F1;

  --shadow-soft: 0 1px 2px rgba(80,55,35,0.05);
  --shadow-card: 0 1px 3px rgba(80,55,35,0.05), 0 10px 28px -16px rgba(80,55,35,0.14);
  --shadow-card-lg: 0 2px 6px rgba(80,55,35,0.06), 0 34px 64px -28px rgba(80,55,35,0.30);
  --shadow-primary: 0 12px 30px -10px rgba(75,102,225,0.42);
}

:root[data-theme="dark"] {
  --bg: #1A1922; --surface: #24232E; --surface-alt: #201F29; --surface-soft: #2B2A36; --surface-deep: #141320;
  --text: #EFEBF3; --text-strong: #F6F2F9; --text-muted: #A39CAE; --text-faint: #857E92;
  --border: #363442; --border-strong: #433F4F;

  --primary: #8194FF; --primary-hover: #9AA8FF;
  /* On-primary LABEL only. In dark mode --primary is a light periwinkle (#8194FF),
     so white text on it is 2.76:1 (sub-AA). --primary-text is used exclusively on
     `background: var(--primary)` fills (.btn-primary, .step-num, .ribbon,
     .mock-btn.primary, .skip-link) — never on links/outline text — so a dark ink
     here makes those filled labels 6.2:1 (AA) without dimming any --primary text.
     Global --primary is left untouched (links/accent-icon stay #8194FF). */
  --primary-text: #1A1922;
  --accent-soft: #2E2C48; --accent-soft-text: #B8C0FF; --accent-icon: #9AA6FF;
  --check: #3FBE88;

  --footer-bg: #141320; --footer-text: #9A93A5; --footer-link: #AEB8FF; --footer-border: #2C2A38; --footer-meta: #6E687C; --footer-h: #F2EFF6;

  --shadow-soft: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 12px 30px -14px rgba(0,0,0,0.6);
  --shadow-card-lg: 0 2px 6px rgba(0,0,0,0.5), 0 36px 70px -26px rgba(0,0,0,0.75);
  --shadow-primary: 0 12px 32px -10px rgba(0,0,0,0.7);
}

/* Site-token aliases — use-cases/style.css names a few tokens differently
   (--accent / --accent-text / --ok / --shadow). Map them onto the Bloom
   tokens above so the use-cases pages recolor with the same palette.
   These reference per-mode tokens via var(), so light/dark follow automatically.
   Inert on pages that don't use these names. */
:root {
  --accent: var(--accent-icon);
  --accent-text: var(--accent-soft-text);
  --ok: var(--check);
  --shadow: var(--shadow-card);
}

.btn { border-radius: 999px !important; }
.icon-btn, .lang-sel { border-radius: 999px !important; }
.mock-btn, .mock-chip, .mock-search { border-radius: 999px !important; }
.mock-check { border-radius: 6px !important; }
.hero-eyebrow { border-radius: 999px !important; }

.feature-card, .usecase-card, .step, .pricing-aside .mini-card,
.latest-badge, .latest-points li, .src-row, .res-row { border-radius: 16px !important; }
.pricing-card, .latest-panel, .detect-core, .cta-strip { border-radius: 22px !important; }
.mock-window { border-radius: 18px !important; }

h1, h2, h3, .brand-name { font-weight: 700; }

.hero-stores {
  background: linear-gradient(90deg, #F3ECFB 0%, #E9ECFB 100%) !important;
  border-color: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  box-shadow: 0 14px 34px rgba(80,55,35,0.06) !important;
}
:root[data-theme="dark"] .hero-stores {
  background: linear-gradient(90deg, #2A2740 0%, #2E2C48 100%) !important;
}
.hero-stores > span { color: var(--text-strong) !important; }
.store-btn { color: var(--accent-soft-text) !important; }
.store-btn:hover { color: var(--primary) !important; }

/* Scope-back: the use-cases pages have a DIFFERENT store button — a solid-white
   pill inside the dark-gradient final CTA (.final-cta .store-btn). The generic
   .store-btn recolor above is meant for the landing hero/pricing store links
   (transparent bg); on the white final-CTA pill it would leave a light lavender
   label on white in dark mode (~1.9:1). Re-assert a fixed AA color (Bloom
   periwinkle #4B66E1 on white = 4.90:1) for label + arrow, both themes. */
.final-cta .store-btn,
.final-cta .store-btn:hover { color: #4B66E1 !important; }
.final-cta .store-btn::after,
.final-cta .store-btn:hover::after { color: #4B66E1 !important; }

/* Landing cta-strip primary is an INVERTED button (white fill,
   `color: var(--primary)` label). In dark mode --primary is light (#8194FF), so
   its label is light-on-white (2.76:1). Pin it to Bloom periwinkle #4B66E1
   (4.90:1 on white, identical to light mode). This is a filled button label, not
   a link/outline on a dark surface, so it honors "keep --primary text #8194FF". */
.cta-strip .btn-primary { color: #4B66E1; }

.ext-pdf  { background: #C0443C !important; }
.ext-docx { background: #2C5EB8 !important; }
.ext-xlsx { background: #1B7F55 !important; }
.ext-zip  { background: #7A54C4 !important; }
.ext-csv  { background: #1F7E93 !important; }
/* png darkened from #B5732A (white text 3.85:1, sub-AA) to the app's Bloom
   img-category color #956525 → white text 5.04:1, WCAG AA. */
.ext-png  { background: #956525 !important; }