/* =========================================================================
   Bhogi Commerce design system — global tokens and base styles.
   Every marketing component reads from these tokens; section styles live in
   their own scoped .razor.css files. Keep this file small and foundational.
   ========================================================================= */

:root {
    /* Brand palette — "Bhogi Commerce Required Colour Changes" spec.
       Named roles first; the numeric scales below are derived from them. */
    --bc-emerald:       #176B4D;   /* primary: brand, main CTA, active states, key links */
    --bc-emerald-dark:  #0E5A43;   /* hero and major dark sections only */
    --bc-fresh:         #35A66F;   /* secondary CTA, highlights, hover/success */
    --bc-mint:          #E6F3EC;   /* feature backgrounds, CTA panels, icon circles */
    --bc-ivory:         #FAF9F4;   /* main soft section background */
    --bc-gold:          #C8A45D;   /* premium highlights, selected accents — accent only */
    --bc-heading:       #17352A;   /* main headings and strong text */
    --bc-body:          #66736D;   /* paragraphs and secondary text */
    --bc-line:          #E4EAE6;   /* card and section borders */
    --bc-hover-bg:      #F7FBF8;   /* card hover background */
    --bc-footer-bg:     #092B21;
    --bc-footer-line:   #1E4D3D;
    --bc-negative:      #C96B5C;   /* cross/negative indicators, sparingly */
    --bc-neutral-card:  #F5F5F3;   /* marketplace / neutral comparison cards */

    /* Green scale */
    --bc-green-950: #062219;
    --bc-green-900: #092B21;
    --bc-green-800: #0E5A43;
    --bc-green-700: #125F45;
    --bc-green-600: #176B4D;   /* primary brand */
    --bc-green-500: #35A66F;
    --bc-green-400: #5DBA8A;
    --bc-green-300: #9CD4B5;
    --bc-green-200: #C9E7D6;
    --bc-green-100: #E6F3EC;
    --bc-green-50:  #F2F8F4;

    /* Ink: heading green and the deepest greens for dark surfaces */
    --bc-ink-950: #092B21;
    --bc-ink-900: #17352A;
    --bc-ink-850: #1B3D30;
    --bc-ink-800: #1E4D3D;
    --bc-ink-700: #2A5A48;
    --bc-ink-600: #3A6A57;

    /* Neutrals */
    --bc-gray-0:   #ffffff;
    --bc-gray-25:  #FBFCFB;
    --bc-gray-50:  #F6F8F7;
    --bc-gray-100: #EEF2EF;
    --bc-gray-200: #E4EAE6;
    --bc-gray-300: #CDD6D1;
    --bc-gray-400: #9AA59F;
    --bc-gray-500: #7A8680;
    --bc-gray-600: #66736D;
    --bc-gray-700: #3F4B45;
    --bc-gray-800: #24302A;
    --bc-gray-900: #17352A;

    /* Accent gold — small premium accents only, never a dominant background */
    --bc-gold-500: #C8A45D;
    --bc-gold-300: #E2CB96;

    /* Semantic */
    --bc-text:          var(--bc-heading);
    --bc-text-muted:    var(--bc-body);
    --bc-text-subtle:   var(--bc-gray-500);
    --bc-surface:       #ffffff;
    --bc-surface-alt:   var(--bc-ivory);
    --bc-border:        var(--bc-line);
    --bc-border-strong: var(--bc-gray-300);
    --bc-primary:       var(--bc-emerald);
    --bc-primary-hover: var(--bc-emerald-dark);
    --bc-focus:         var(--bc-fresh);

    --bc-on-dark:        #ffffff;
    --bc-on-dark-muted:  #D7E5DE;
    --bc-on-dark-subtle: rgba(215, 229, 222, 0.72);
    --bc-dark-border:    rgba(255, 255, 255, 0.12);
    --bc-dark-surface:   rgba(255, 255, 255, 0.05);

    /* Typography */
    --bc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bc-font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --bc-text-xs:   0.75rem;    /* 12 */
    --bc-text-sm:   0.875rem;   /* 14 */
    --bc-text-base: 1rem;       /* 16 */
    --bc-text-lg:   1.125rem;   /* 18 */
    --bc-text-xl:   1.25rem;    /* 20 */
    --bc-text-2xl:  1.5rem;     /* 24 */
    --bc-text-h2:   clamp(2rem, 1.35rem + 2.2vw, 3rem);          /* 32 → 48 */
    --bc-text-h1:   clamp(2.5rem, 1.4rem + 4vw, 4.5rem);         /* 40 → 72 */

    /* Spacing (4px grid) */
    --bc-space-1: 4px;
    --bc-space-2: 8px;
    --bc-space-3: 12px;
    --bc-space-4: 16px;
    --bc-space-5: 20px;
    --bc-space-6: 24px;
    --bc-space-8: 32px;
    --bc-space-10: 40px;
    --bc-space-12: 48px;
    --bc-space-16: 64px;
    --bc-space-20: 80px;
    --bc-space-24: 96px;
    --bc-space-32: 128px;
    --bc-section-y: clamp(72px, 5vw + 40px, 128px);
    --bc-container: 1200px;
    --bc-header-h: 60px;
    --bc-gutter: clamp(16px, 4vw, 32px);

    /* Radius */
    --bc-radius-sm: 6px;
    --bc-radius-md: 10px;
    --bc-radius-lg: 14px;
    --bc-radius-xl: 20px;
    --bc-radius-pill: 999px;

    /* Elevation */
    --bc-shadow-xs: 0 1px 2px rgba(8, 17, 15, 0.06);
    --bc-shadow-sm: 0 1px 2px rgba(8, 17, 15, 0.05), 0 2px 8px -2px rgba(8, 17, 15, 0.06);
    --bc-shadow-md: 0 2px 4px -1px rgba(8, 17, 15, 0.05), 0 12px 24px -8px rgba(8, 17, 15, 0.12);
    --bc-shadow-lg: 0 4px 8px -2px rgba(8, 17, 15, 0.06), 0 32px 64px -24px rgba(8, 17, 15, 0.22);
    --bc-shadow-glow: 0 0 0 1px rgba(53, 166, 111, 0.25), 0 20px 60px -20px rgba(23, 107, 77, 0.5);

    /* Motion */
    --bc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --bc-dur-fast: 150ms;
    --bc-dur: 220ms;
    --bc-dur-slow: 480ms;
}

@media (min-width: 1080px) {
    :root { --bc-header-h: 72px; }
}

/* -------------------------------------------------------------------------
   Base — fixes the Times New Roman fallback across the whole site.
   Only families and rendering are set here so existing pages keep their sizes.
   ------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--bc-font-sans);
    color: var(--bc-text);
    background: var(--bc-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bc-font-display);
}

button, input, select, textarea {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--bc-focus);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Shared primitives (prefixed bc- to avoid collisions with legacy CSS)
   ------------------------------------------------------------------------- */
.bc-container {
    width: 100%;
    max-width: calc(var(--bc-container) + var(--bc-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bc-gutter);
    box-sizing: border-box;
}

.bc-section {
    padding-block: var(--bc-section-y);
    position: relative;
}

.bc-section--alt { background: var(--bc-surface-alt); }

.bc-section--dark {
    background: var(--bc-emerald-dark);
    color: var(--bc-on-dark);
}

.bc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bc-green-600);
    margin: 0 0 var(--bc-space-4);
}

.bc-section--dark .bc-eyebrow { color: var(--bc-gold); }

.bc-h2 {
    font-family: var(--bc-font-display);
    font-size: var(--bc-text-h2);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bc-ink-900);
    margin: 0;
    text-wrap: balance;
}

.bc-section--dark .bc-h2 { color: #fff; }

.bc-lede {
    font-size: var(--bc-text-lg);
    line-height: 1.6;
    color: var(--bc-text-muted);
    margin: var(--bc-space-5) 0 0;
    max-width: 640px;
    text-wrap: pretty;
}

.bc-section--dark .bc-lede { color: var(--bc-on-dark-muted); }

.bc-section-head {
    max-width: 760px;
    margin-bottom: var(--bc-space-16);
}

.bc-section-head--center {
    margin-inline: auto;
    text-align: center;
}

.bc-section-head--center .bc-lede { margin-inline: auto; }

/* Buttons */
.bc-btn {
    --_bg: var(--bc-primary);
    --_fg: #fff;
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--bc-radius-md);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font-family: var(--bc-font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bc-dur) var(--bc-ease), border-color var(--bc-dur) var(--bc-ease),
                color var(--bc-dur) var(--bc-ease), transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease);
}

.bc-btn:hover { transform: translateY(-1px); }
.bc-btn:active { transform: translateY(0); }

.bc-btn--primary {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px -8px rgba(23, 107, 77, 0.6);
}
.bc-btn--primary:hover { --_bg: var(--bc-primary-hover); }

/* Secondary CTA on dark emerald sections (spec: Fresh Green #35A66F) */
.bc-btn--fresh {
    --_bg: var(--bc-fresh);
    --_fg: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px -8px rgba(9, 43, 33, 0.55);
}
.bc-btn--fresh:hover { --_bg: #2E9462; }

.bc-btn--ghost-dark {
    --_bg: transparent;
    --_fg: #fff;
    --_bd: #fff;
}
.bc-btn--ghost-dark:hover { --_bg: rgba(255, 255, 255, 0.08); --_bd: #fff; }

.bc-btn--secondary {
    --_bg: #fff;
    --_fg: var(--bc-ink-900);
    --_bd: var(--bc-border-strong);
    box-shadow: var(--bc-shadow-xs);
}
.bc-btn--secondary:hover { --_bd: var(--bc-gray-400); }

.bc-btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.bc-btn--sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--bc-radius-sm); }

.bc-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--bc-text-sm);
    color: var(--bc-green-600);
    text-decoration: none;
}
.bc-link-arrow svg { transition: transform var(--bc-dur) var(--bc-ease); }
.bc-link-arrow:hover svg { transform: translateX(3px); }
.bc-section--dark .bc-link-arrow { color: var(--bc-green-300); }

/* Scroll reveal: elements start visible; wwwroot/js/bhogi-reveal.js adds .bc-reveal-ready
   to <html> and marks elements with a data attribute (not a class, so Blazor re-renders
   never strip it). */
.bc-reveal-ready [data-bc-reveal]:not([data-bc-in]) {
    opacity: 0;
    transform: translateY(14px);
}
.bc-reveal-ready [data-bc-reveal] {
    transition: opacity 640ms var(--bc-ease), transform 640ms var(--bc-ease);
}

@media (prefers-reduced-motion: reduce) {
    .bc-reveal-ready [data-bc-reveal] { opacity: 1; transform: none; transition: none; }
    .bc-btn, .bc-btn:hover { transition: none; transform: none; }
}