/* ==========================================================================
   Bhowra Marketing — self-contained design tokens
   Adapted from web/src/styles/bhowra-tokens.css, simplified for standalone use
   (no React app theming dependency).

   Light theme is the default. Dark theme automatically applies when the
   visitor's OS / browser is set to prefers-color-scheme: dark. Every
   semantic token (--background, --foreground, --card, etc.) has both a
   light and a dark value below, so a single favicon.svg with its own CSS
   color-scheme media query renders correctly in either context — no
   `favicon-fixed.svg` hack required.
   ========================================================================== */

:root {
  /* ---- Brand palette (theme-invariant) ------------------------------- */
  --bh-brand-indigo: #7c5cff;
  --bh-brand-indigo-hover: #6a48f0;
  --bh-brand-blue: #2563eb;

  /* ---- Pastel icon-tile backgrounds (matches web/bhowra-tokens.css)
         Same in both themes — they're light pastels that read as soft
         tiles on light bg and as glowing accents on dark bg. */
  --bh-pastel-peach:  #ffe4d9;
  --bh-pastel-mint:   #d1f5e0;
  --bh-pastel-lilac:  #ede7f6;
  --bh-pastel-pink:   #fce7f3;
  --bh-pastel-butter: #fff4d6;
  --bh-pastel-sky:    #dbeafe;

  /* Deeper shades of the pastel hues for icon strokes (theme-invariant) */
  --bh-icon-peach:    #c2410c;
  --bh-icon-mint:     #047857;
  --bh-icon-lilac:    #6a48f0;
  --bh-icon-pink:     #be185d;
  --bh-icon-butter:   #b45309;
  --bh-icon-sky:      #1d4ed8;

  /* ---- Neutral ramp (theme-invariant raw values) --------------------- */
  --bh-gray-50:  #f8fafc;
  --bh-gray-100: #f5f6f8;
  --bh-gray-200: #e5e7eb;
  --bh-gray-300: #d1d5db;
  --bh-gray-400: #9ca3af;
  --bh-gray-500: #6b7280;
  --bh-gray-600: #4b5563;
  --bh-gray-700: #334155;
  --bh-gray-800: #1f2937;
  --bh-gray-900: #111827;
  --bh-gray-950: #0b1220;

  /* ---- Type (theme-invariant) ---------------------------------------- */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Radii (theme-invariant) --------------------------------------- */
  --bh-radius-sm: 6px;
  --bh-radius-md: 10px;
  --bh-radius-lg: 14px;
  --bh-radius-xl: 20px;
  --bh-radius-full: 9999px;

  /* ---- Hero gradient (theme-invariant) ------------------------------- */
  --hero-gradient: linear-gradient(90deg, #7c5cff 0%, #d946ef 100%);

  /* ---- Translucent surface fills (used by sticky header) ------------- */
  --surface-translucent: rgba(255, 255, 255, 0.92);
  --surface-dropdown:    #ffffff;
  --shadow-sticky:       0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.03);

  /* ---- LIGHT theme semantic tokens (default) ------------------------- */
  --background:          #ffffff;
  --foreground:          #0f172a;
  --card:                #ffffff;
  --muted:               #f8fafc;
  --muted-foreground:    #64748b;
  --accent:              #f1f5f9;
  --accent-foreground:   #0f172a;
  --primary:             var(--bh-brand-indigo);
  --primary-foreground:  #ffffff;
  --secondary:           #1f2937;
  --secondary-foreground:#ffffff;
  --border:              #e5e7eb;
  --input:               #e5e7eb;
  --destructive:         #dc2626;

  /* ---- LIGHT theme button-dark colors (the "Try it now" CTA) --------- */
  /* In light theme: black button on white bg. In dark theme: inverted. */
  --btn-dark-bg:         #0f172a;
  --btn-dark-bg-hover:   #1e293b;
  --btn-dark-fg:         #ffffff;
}

/* ==========================================================================
   DARK theme overrides — applies automatically when the visitor's OS or
   browser is set to dark mode. No JavaScript toggle, no flash of wrong
   theme, no flicker on page transitions.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces */
    --background:          var(--bh-gray-950);
    --foreground:          #e5e7eb;
    --card:                var(--bh-gray-900);
    --muted:               var(--bh-gray-800);
    --muted-foreground:    var(--bh-gray-400);
    --accent:              var(--bh-gray-800);
    --accent-foreground:   #e5e7eb;

    /* Action colors */
    --primary:             var(--bh-brand-indigo);
    --primary-foreground:  #ffffff;
    --secondary:           #e5e7eb;
    --secondary-foreground:#0f172a;

    /* Boundaries */
    --border:              var(--bh-gray-800);
    --input:               var(--bh-gray-800);
    --destructive:         #f87171;

    /* Translucent surfaces re-tuned for dark sticky header */
    --surface-translucent: rgba(11, 18, 32, 0.92);
    --surface-dropdown:    var(--bh-gray-900);
    --shadow-sticky:       0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Inverted button-dark — on a dark bg, the "dark" CTA becomes light
       so it stays visually prominent against the page. */
    --btn-dark-bg:         #ffffff;
    --btn-dark-bg-hover:   #e5e7eb;
    --btn-dark-fg:         #0f172a;
  }
}