/* servingthebest-platform — Warm-Navy theme
 *
 * Palette: navy (#1A3A5C) + orange (#E87722) on a soft bone/white surface.
 * Typography: Plus Jakarta Sans display, Inter body.
 *
 * Package CSS is imported in ThemeShell.jsx (the @stb-<slug>/../css/<slug>.css
 * pattern) — not here — so the Vite bundle picks them up. Theme overrides for
 * package variables live in the :root block below. See packages/<slug>/THEMING.md
 * for each package's exposed CSS custom properties.
 */

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

:root {
  /* Palette — navy scale */
  --stb-navy-50:   #F2F6FA;
  --stb-navy-100:  #E2ECF4;
  --stb-navy-200:  #BDD0E1;
  --stb-navy-300:  #8FAFCB;
  --stb-navy-400:  #5A86AE;
  --stb-navy-500:  #2F5F8A;
  --stb-navy-600:  #1A3A5C;
  --stb-navy-700:  #152F4A;
  --stb-navy-800:  #10243A;
  --stb-navy-900:  #0A192B;

  /* Palette — orange scale */
  --stb-orange-50:  #FDF3EA;
  --stb-orange-100: #FAE2CB;
  --stb-orange-500: #E87722;
  --stb-orange-600: #D0651A;
  --stb-orange-700: #A85214;

  /* Semantic aliases */
  --stb-navy:        var(--stb-navy-600);
  --stb-accent:      var(--stb-orange-500);
  --stb-accent-deep: var(--stb-orange-600);
  --stb-bone:        var(--stb-navy-50);
  --stb-ink:         #333333;
  --stb-ink-soft:    rgba(51, 51, 51, 0.75);
  --stb-surface:     #ffffff;
  --stb-muted:       #6B7B8E;
  --stb-subtle:      #4F6276;
  --stb-border:      var(--stb-navy-100);
  --stb-border-soft: rgba(26, 58, 92, 0.08);

  /* Typography */
  --stb-font-display: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --stb-font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Shadow tokens */
  --stb-shadow-card:        0 1px 2px rgba(16,36,58,0.04), 0 8px 24px -8px rgba(16,36,58,0.10);
  --stb-shadow-card-hover:  0 1px 2px rgba(16,36,58,0.06), 0 18px 40px -12px rgba(16,36,58,0.20);

  /* Radius scale */
  --stb-radius-sm: 6px;
  --stb-radius-md: 10px;
  --stb-radius-lg: 16px;
  --stb-radius-xl: 24px;

  /* AI chatbot overrides — variable names per packages/ai-chatbot/THEMING.md §5.
   * --stb-chatbot-accent drives the launcher button, panel header, user message
   * bubbles and send button — mapping it to the theme orange flips the package's
   * default blue throughout. */
  --stb-chatbot-accent:             var(--stb-accent);
  --stb-chatbot-accent-contrast:    #ffffff;
  --stb-chatbot-surface:            #ffffff;
  --stb-chatbot-surface-muted:      var(--stb-navy-50);
  --stb-chatbot-text:               var(--stb-ink);
  --stb-chatbot-text-muted:         var(--stb-muted);
  --stb-chatbot-border:             var(--stb-border);
  --stb-chatbot-radius:             var(--stb-radius-lg);
  --stb-chatbot-shadow:             var(--stb-shadow-card);
  --stb-chatbot-font:               var(--stb-font-body);

  /* Contact overrides — see packages/contact/THEMING.md */
  --stb-contact-form-bg:            #ffffff;
  --stb-contact-form-fg:            var(--stb-ink);
  --stb-contact-input-bg:           #ffffff;
  --stb-contact-input-border:       var(--stb-border);
  --stb-contact-submit-bg:          var(--stb-accent);
  --stb-contact-submit-fg:          #ffffff;
  --stb-contact-submit-hover-bg:    var(--stb-accent-deep);

  /* Portfolio overrides — see packages/portfolio/THEMING.md */
  --stb-portfolio-card-bg:          #ffffff;
  --stb-portfolio-card-border:      var(--stb-border);
  --stb-portfolio-tag-bg:           var(--stb-navy-50);
  --stb-portfolio-tag-fg:           var(--stb-navy-600);

  /* FAQs overrides — see packages/faqs/THEMING.md */
  --stb-faq-accent:                 var(--stb-navy-600);
  --stb-faq-row-divider:            1px solid var(--stb-border);
  --stb-faq-row-padding:            1rem 0;
  --stb-faq-answer-color:           var(--stb-ink-soft);
  --stb-faq-question-font-weight:   700;
  --stb-faq-list-gap:               0.5rem;
  --stb-faq-radius:                 var(--stb-radius-md);
}

body.theme-servingthebest-platform {
  font-family: var(--stb-font-body);
  color: var(--stb-ink);
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@layer base {
  :where(.theme-servingthebest-platform h1, .theme-servingthebest-platform h2, .theme-servingthebest-platform h3, .theme-servingthebest-platform h4) {
    font-family: var(--stb-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--stb-navy-600);
  }
}

/* Focus rings */
.theme-servingthebest-platform :focus-visible {
  outline: 2px solid var(--stb-accent);
  outline-offset: 2px;
  border-radius: var(--stb-radius-sm);
}

/* Reveal-on-scroll animation primitive used by the <Reveal> wrapper */
.stb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.stb-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Hero subtle grid pattern */
.stb-hero-grid {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(232,119,34,0.10), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}

/* Accordion grid-row trick for smooth FAQ open/close */
.stb-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.stb-accordion-content.is-open { grid-template-rows: 1fr; }
.stb-accordion-content > div { overflow: hidden; }

/* Smooth-scroll for anchor nav */
html { scroll-behavior: smooth; }