/*
 * ============================================================
 *  FUTUROBOTS — DESIGN TOKENS
 *  THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN DECISIONS
 * ============================================================
 *
 *  HOW THIS WORKS
 *  --------------
 *  Astra Pro Global Color Palette (set in Customizer) outputs
 *  --ast-global-color-0 through --ast-global-color-8 as CSS
 *  variables on every page.
 *
 *  This file maps those Astra variables to semantic --fbm-*
 *  tokens. Every CSS file in this plugin (public.css, landing.css,
 *  chatbot.css, sign-contract.css, admin.css) MUST only reference
 *  --fbm-* tokens — never hardcoded hex values.
 *
 *  TO CHANGE A COLOR SITEWIDE:
 *  → Go to WP Admin → Appearance → Customize → Global Color Palette
 *  → Change the relevant swatch. Done. No code changes needed.
 *
 *  PALETTE SLOT MAP (configured in Astra Customizer):
 *  --ast-global-color-0  #0066FF  Brand Primary (blue)
 *  --ast-global-color-1  #0050CC  Brand Primary Dark (hover)
 *  --ast-global-color-2  #F59E0B  Accent / CTA (amber)
 *  --ast-global-color-3  #1A202C  Heading / dark text
 *  --ast-global-color-4  #64748B  Muted / secondary text
 *  --ast-global-color-5  #F8FAFC  Alt surface / light background
 *  --ast-global-color-6  #E2E8F0  Border / divider
 *  --ast-global-color-7  #0F172A  Dark background (hero, footer)
 *  --ast-global-color-8  #FFFFFF  White / card background
 * ============================================================
 */

:root {

    /* ── BRAND COLORS ─────────────────────────────────────────
       These map directly to Astra's palette slots.
       Change the slot in Customizer → changes everywhere.
    ───────────────────────────────────────────────────────── */
    --fbm-primary:        var(--ast-global-color-0, #0066FF);
    --fbm-primary-dark:   var(--ast-global-color-1, #0050CC);
    --fbm-accent:         var(--ast-global-color-2, #F59E0B);
    --fbm-accent-dark:    color-mix(in srgb, var(--fbm-accent) 85%, black);

    /* ── TEXT COLORS ──────────────────────────────────────── */
    --fbm-text:           var(--ast-global-color-3, #1A202C);
    --fbm-text-muted:     var(--ast-global-color-4, #64748B);
    --fbm-text-light:     var(--ast-global-color-8, #FFFFFF);
    --fbm-text-on-dark:   rgba(255, 255, 255, 0.75);

    /* ── BACKGROUNDS ──────────────────────────────────────── */
    --fbm-bg:             var(--ast-global-color-8, #FFFFFF);
    --fbm-bg-alt:         var(--ast-global-color-5, #F8FAFC);
    --fbm-bg-dark:        var(--ast-global-color-7, #0F172A);
    --fbm-bg-dark-mid:    color-mix(in srgb, var(--fbm-bg-dark) 80%, white);

    /* ── BORDERS ──────────────────────────────────────────── */
    --fbm-border:         var(--ast-global-color-6, #E2E8F0);
    --fbm-border-dark:    rgba(255, 255, 255, 0.12);

    /* ── DARK SECTION TEXT ────────────────────────────────── */
    --fbm-link-on-dark:   #60a5fa;   /* sky-blue links/text used on dark backgrounds */

    /* ── SEMANTIC / STATUS COLORS ─────────────────────────── */
    --fbm-success:        #16a34a;
    --fbm-success-bg:     #f0fdf4;
    --fbm-error:          #dc2626;
    --fbm-error-bg:       #fef2f2;
    --fbm-warning:        #d97706;
    --fbm-warning-bg:     #fffbeb;
    --fbm-error-border:       #fca5a5;   /* light red border — buy/error comparison columns */
    --fbm-success-border:     #86efac;   /* light green border — rent/success comparison columns */
    --fbm-hero-gradient-end:  #1e3a5f;   /* mid-dark-blue gradient stop for hero sections */
    --fbm-info:           var(--fbm-primary);
    --fbm-info-bg:        #eff6ff;

    /* ── TYPOGRAPHY ───────────────────────────────────────────
       Fonts are set in Astra Customizer → Typography.
       Fallback stack used only if Astra hasn't loaded yet.
    ───────────────────────────────────────────────────────── */
    --fbm-font:           var(--ast-body-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --fbm-font-heading:   var(--ast-heading-font-family, var(--fbm-font));

    /* Type scale — rem-based so user browser settings are respected */
    --fbm-text-xs:        0.75rem;    /*  12px */
    --fbm-text-sm:        0.8125rem;  /*  13px */
    --fbm-text-base:      0.9375rem;  /*  15px */
    --fbm-text-md:        1rem;       /*  16px */
    --fbm-text-lg:        1.125rem;   /*  18px */
    --fbm-text-xl:        1.25rem;    /*  20px */
    --fbm-text-2xl:       1.5rem;     /*  24px */
    --fbm-text-3xl:       clamp(1.6rem, 3.5vw, 2.4rem);
    --fbm-text-4xl:       clamp(2rem,   5vw,   3.2rem);

    --fbm-font-weight-normal:  400;
    --fbm-font-weight-medium:  500;
    --fbm-font-weight-bold:    700;
    --fbm-font-weight-black:   900;

    --fbm-line-height-tight:   1.2;
    --fbm-line-height-base:    1.6;
    --fbm-line-height-loose:   1.75;

    /* ── SPACING SCALE ────────────────────────────────────── */
    --fbm-space-1:        4px;
    --fbm-space-2:        8px;
    --fbm-space-3:        12px;
    --fbm-space-4:        16px;
    --fbm-space-5:        20px;
    --fbm-space-6:        24px;
    --fbm-space-8:        32px;
    --fbm-space-10:       40px;
    --fbm-space-12:       48px;
    --fbm-space-16:       64px;
    --fbm-space-20:       80px;

    /* ── BORDER RADIUS ────────────────────────────────────── */
    --fbm-radius-sm:      6px;
    --fbm-radius-md:      10px;
    --fbm-radius-lg:      16px;
    --fbm-radius-xl:      24px;
    --fbm-radius-pill:    9999px;

    /* ── SHADOWS ──────────────────────────────────────────── */
    --fbm-shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.06);
    --fbm-shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);
    --fbm-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.12);
    --fbm-shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.16);
    --fbm-shadow-primary: 0 4px 24px rgba(0, 102, 255, 0.3);
    --fbm-shadow-accent:  0 4px 24px rgba(245, 158, 11, 0.35);

    /* ── TRANSITIONS ──────────────────────────────────────── */
    --fbm-transition:     0.15s ease;
    --fbm-transition-md:  0.25s ease;

    /* ── LAYOUT ───────────────────────────────────────────── */
    --fbm-container:      var(--ast-global-width, 1200px);
    --fbm-container-sm:   860px;
    --fbm-container-xs:   680px;

    /* ── Z-INDEX SCALE ────────────────────────────────────── */
    --fbm-z-dropdown:     100;
    --fbm-z-sticky:       200;
    --fbm-z-modal:        9999;
    --fbm-z-lightbox:     99999;
}

/* ── COMPONENT TOKENS ─────────────────────────────────────────
   Semantic shortcuts built from the base tokens above.
   Use these for specific UI components.
─────────────────────────────────────────────────────────────── */
:root {

    /* Buttons — primary */
    --fbm-btn-bg:          var(--fbm-primary);
    --fbm-btn-bg-hover:    var(--fbm-primary-dark);
    --fbm-btn-text:        #ffffff;
    --fbm-btn-radius:      var(--fbm-radius-sm);
    --fbm-btn-shadow:      var(--fbm-shadow-primary);
    --fbm-btn-padding:     12px 28px;
    --fbm-btn-font-size:   var(--fbm-text-base);
    --fbm-btn-font-weight: var(--fbm-font-weight-bold);

    /* Buttons — accent (amber CTA, landing pages) */
    --fbm-btn-accent-bg:       var(--fbm-accent);
    --fbm-btn-accent-bg-hover: var(--fbm-accent-dark);
    --fbm-btn-accent-text:     #000000;
    --fbm-btn-accent-shadow:   var(--fbm-shadow-accent);

    /* Buttons — ghost / outline */
    --fbm-btn-ghost-border: var(--fbm-primary);
    --fbm-btn-ghost-text:   var(--fbm-primary);
    --fbm-btn-ghost-hover-bg: var(--fbm-primary);
    --fbm-btn-ghost-hover-text: #ffffff;

    /* Cards */
    --fbm-card-bg:         var(--fbm-bg);
    --fbm-card-border:     var(--fbm-border);
    --fbm-card-radius:     var(--fbm-radius-lg);
    --fbm-card-shadow:     var(--fbm-shadow-md);
    --fbm-card-padding:    var(--fbm-space-6);

    /* Inputs / Forms */
    --fbm-input-bg:        var(--fbm-bg);
    --fbm-input-border:    var(--fbm-border);
    --fbm-input-border-focus: var(--fbm-primary);
    --fbm-input-text:      var(--fbm-text);
    --fbm-input-placeholder: var(--fbm-text-muted);
    --fbm-input-radius:    var(--fbm-radius-sm);
    --fbm-input-padding:   10px 14px;

    /* Sections */
    --fbm-section-padding: var(--fbm-space-20) 0;
    --fbm-section-padding-sm: var(--fbm-space-12) 0;

    /* Dark sections (hero, footer, urgency strips) */
    --fbm-dark-bg:         var(--fbm-bg-dark);
    --fbm-dark-text:       #ffffff;
    --fbm-dark-text-muted: rgba(255, 255, 255, 0.6);
    --fbm-dark-border:     rgba(255, 255, 255, 0.1);

    /* Badges / Pills */
    --fbm-badge-bg:        var(--fbm-info-bg);
    --fbm-badge-text:      var(--fbm-primary);
    --fbm-badge-radius:    var(--fbm-radius-pill);

    /* Progress / Status */
    --fbm-progress-active:    var(--fbm-primary);
    --fbm-progress-complete:  var(--fbm-success);
    --fbm-progress-inactive:  var(--fbm-border);
}

/* ── RESPONSIVE BREAKPOINT REFERENCE (for JS / docs) ─────────
   Use these in media queries throughout all CSS files.
   —————————————————————————————————————————————
   Mobile:        max-width: 480px
   Mobile-lg:     max-width: 600px
   Tablet-sm:     max-width: 768px
   Tablet:        max-width: 900px
   Desktop-sm:    max-width: 1024px
   Desktop:       min-width: 1025px
─────────────────────────────────────────────────────────────── */

/* ── FOOTER TOKENS ────────────────────────────────────────────
   Used exclusively by footer.css / footer.php
─────────────────────────────────────────────────────────────── */
:root {
    --fbm-footer-bg:          var(--fbm-bg-dark);               /* dark navy background */
    --fbm-footer-text:        rgba(148, 163, 184, 0.85);        /* slate-400 muted white */
    --fbm-footer-link:        rgba(148, 163, 184, 0.7);         /* slightly dimmer for links */
    --fbm-footer-link-hover:  var(--fbm-bg);                    /* white on hover */
    --fbm-footer-border:      rgba(255, 255, 255, 0.08);        /* subtle divider on dark */
}