/* =====================================================================
   BUSIQUEENS BRAND TOKENS  v1.0  (locked 25 Sep 2026)
   Source of truth for colours, fonts, radius, shadows and core components.
   Taken 1:1 from the approved preview: 04_Busiqueens_Website_Preview.html
   The same palette is registered in theme.json. main.css uses only these
   variables, never raw colour values. Do NOT invent new colours.
   ===================================================================== */

/* Fonts are self-hosted from assets/fonts/ and declared in theme.json (fontFace, font-display: swap). */

/* Fallback faces sized to match the brand fonts (Sitewide SEO brief 6.8): while Cormorant Garamond and DM Sans
   load (font-display: swap), text set in Georgia and Arial takes the same space, so the swap does not move the
   layout (CLS). Metrics measured from the woff2 files against Georgia and Arial; DM Sans 700 (uppercase eyebrows) is sized
   so the fallback is never wider than the real font, so eyebrows never re-wrap. */
@font-face{font-family:'Cormorant Fallback';src:local('Georgia');font-weight:100 650;size-adjust:88.62%;ascent-override:104.26%;descent-override:32.38%;line-gap-override:0%}
@font-face{font-family:'Cormorant Fallback';src:local('Georgia Bold'),local('Georgia-Bold');font-weight:651 900;size-adjust:76.37%;ascent-override:121%;descent-override:37.58%;line-gap-override:0%}
@font-face{font-family:'Cormorant Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;font-weight:100 900;size-adjust:79.00%;ascent-override:116.96%;descent-override:36.33%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');font-weight:100 450;size-adjust:102.91%;ascent-override:96.40%;descent-override:30.12%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');font-weight:451 550;size-adjust:104.66%;ascent-override:94.78%;descent-override:29.62%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:551 650;size-adjust:99.90%;ascent-override:99.30%;descent-override:31.03%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:651 900;size-adjust:96.5%;ascent-override:102.8%;descent-override:32.12%;line-gap-override:0%}

:root{
  /* ---- Core brand (from the gold BQ crown logo) ---- */
  --bq-black:      #141115;  /* primary dark: header, footer, dark sections */
  --bq-black-2:    #1E1A1F;  /* raised dark surface */
  --bq-black-3:    #2A2429;  /* dark borders, hover on dark */
  --bq-black-deep: #0E0C0F;  /* footer background */
  --bq-gold:       #C9A646;  /* primary accent: buttons, icons, lines */
  --bq-gold-light: #E6C76A;  /* gold on dark backgrounds, active nav */
  --bq-gold-dark:  #9C7A26;  /* gold for large/bold text, eyebrows, icons on light (3.8:1, large text only) */
  --bq-gold-deep:  #7A5E17;  /* gold for SMALL text and links on light backgrounds (5.1:1, passes AA) */
  --bq-gold-pale:  #F3EAD5;  /* pill / tag background */
  --bq-gold-wash:  #FBF1D6;  /* hover wash, highlights */

  /* ---- Light surfaces ---- */
  --bq-ivory:  #FBF7EF;  /* main page background */
  --bq-blush:  #F6EBE3;  /* alternate section background */
  --bq-white:  #FFFFFF;  /* cards, forms, white sections */
  --bq-line:   #EADFCF;  /* borders and dividers on light */

  /* ---- Text ---- */
  --bq-ink:    #1F1B20;  /* headings and body on light */
  --bq-muted:  #6E6770;  /* secondary text on light */
  --bq-on-dark:       #E9E3D8; /* body text on black */
  --bq-on-dark-muted: #BDB4AA; /* secondary text on black */

  /* ---- Functional (use sparingly) ---- */
  --bq-success: #2E7D5B;  /* Verified status, success messages */
  --bq-success-bg: #E3F2EA;
  --bq-error:   #B3261E;  /* form errors only */

  /* ---- Gradients ---- */
  --bq-grad-gold: linear-gradient(135deg,#E6C76A 0%,#C9A646 55%,#9C7A26 100%);          /* primary buttons */
  --bq-grad-gold-text: linear-gradient(100deg,#E6C76A,#C9A646 45%,#F3DE9A 60%,#9C7A26); /* italic highlight words in headings */
  --bq-grad-announce: linear-gradient(90deg,#9C7A26,#C9A646,#9C7A26);                   /* top announcement bar */
  --bq-hero-overlay: linear-gradient(90deg,rgba(20,17,21,.95) 0%,rgba(20,17,21,.82) 42%,rgba(20,17,21,.35) 75%,rgba(20,17,21,.2));

  /* ---- Typography ---- */
  --bq-font-head: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;   /* H1 to H4, big numbers, quotes. Weight 600/700 */
  --bq-font-body: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;       /* body, nav, buttons, forms. Weight 400/500/600/700 */
  --bq-h1: clamp(40px,5.6vw,72px);
  --bq-h2: clamp(32px,3.8vw,48px);
  --bq-h3: 24px;
  --bq-body: 16px;  /* 15px on mobile */
  --bq-eyebrow: 12px; /* uppercase, letter-spacing .22em, weight 700, gold-dark */

  /* ---- Shape and depth ---- */
  --bq-radius: 14px;      /* cards */
  --bq-radius-lg: 20px;   /* large cards, photos, forms */
  --bq-radius-pill: 999px;/* buttons, chips, pills */
  --bq-shadow: 0 10px 30px rgba(20,17,21,.08);
  --bq-shadow-lg: 0 24px 60px rgba(20,17,21,.18);
  --bq-shadow-gold: 0 8px 24px rgba(201,166,70,.35);

  /* ---- Preview tints (approved in 04b, used by main.css) ---- */
  --bq-on-gold:        #1A1406;  /* text on gold buttons and the announcement bar */
  --bq-card-line:      #F0E7D8;  /* card borders */
  --bq-field:          #FDFBF7;  /* form field fill */
  --bq-gold-shine:     #F3DE9A;  /* highlight stop in gold text, Sample labels */
  --bq-gold-cream:     #FFFBF0;  /* selected option, certificate card */
  --bq-gold-cream-2:   #F8EDD2;  /* certificate card gradient end */
  --bq-icon-bg-1:      #FFF6DD;  /* icon square gradient start */
  --bq-icon-bg-2:      #F1E0B2;  /* icon square gradient end */
  --bq-poll-bar:       #F6E6BA;  /* poll result bar end */
  --bq-step-idle:      #F1EAE0;  /* inactive stepper circle and line */
  --bq-dash-bg:        #F6F2EB;  /* dashboard background */
  --bq-kpi-line:       #EFE6D7;  /* dashboard cards and progress track */
  --bq-crumb-sep:      #C8BDB0;  /* breadcrumb separator */
  --bq-count:          #B3A9A0;  /* filter counts */
  --bq-dashed:         #D9CCB6;  /* partner logo slot border */
  --bq-dashed-text:    #B3A58E;  /* partner logo slot text */
  --bq-disabled:       #A69FA6;  /* "not included" ticks */
  --bq-disabled-bg:    #EEE8EE;
  --bq-cmp-no:         #C9BFC9;  /* comparison table "no" */
  --bq-note-bg:        #FFF8E6;
  --bq-note-text:      #6A5214;
  --bq-hero-lead:      #E4DCCF;  /* hero lead paragraph */
  --bq-phero-lead:     #D6CDC0;  /* inner page hero lead */
  --bq-on-dark-nav:    #D9D1C4;  /* header menu links */
  --bq-on-dark-soft:   #CFC6BA;  /* mobile menu children, proof text, bottom bar */
  --bq-footer-text:    #A89F95;  /* footer text, muted on dark */
  --bq-dark-line:      #3A3238;  /* social icon rings */
  --bq-footer-line:    #231F24;  /* footer bottom divider */
  --bq-dark-field:     #1A171B;  /* footer input, trademark chip */
  --bq-dark-brown:     #2A2016;  /* dark CTA panel gradient end */
  --bq-overlay:        rgba(20,17,21,.78);  /* Sample label background */

  /* ---- Layout ---- */
  --bq-container: 1200px;  /* header container 1320px */
  --bq-gutter: 24px;       /* 16px on mobile */
  --bq-section: 96px;      /* vertical section padding; 64px on mobile */
  --bq-header-h: 78px;     /* 66px on mobile */
}

/* ---------------- Core components ---------------- */
body{font-family:var(--bq-font-body);color:var(--bq-ink);background:var(--bq-ivory);line-height:1.6}
h1,h2,h3,h4{font-family:var(--bq-font-head);font-weight:600;line-height:1.12;color:var(--bq-ink)}
.bq-gold-text{background:var(--bq-grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.bq-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--bq-gold-dark)}
.bq-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}

.bq-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;border:1.5px solid transparent;transition:.2s}
.bq-btn-gold{background:var(--bq-grad-gold);color:#1A1406;box-shadow:var(--bq-shadow-gold)}      /* PRIMARY CTA */
.bq-btn-gold:hover{transform:translateY(-2px)}
.bq-btn-dark{background:var(--bq-black);color:#fff}                                             /* secondary on light */
.bq-btn-line{border-color:var(--bq-ink);color:var(--bq-ink)}                                    /* tertiary on light */
.bq-btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}                                     /* secondary on dark/photo */
.bq-btn-outline-gold{border-color:var(--bq-gold);color:var(--bq-gold-light)}                    /* outline gold button (the header account button was removed on 29 Sep 2026) */

.bq-card{background:#fff;border:1px solid #F0E7D8;border-radius:var(--bq-radius);box-shadow:var(--bq-shadow)}
.bq-pill{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--bq-gold-pale);color:#7A5E17}
.bq-verified{background:var(--bq-black);color:var(--bq-gold-light);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;border:2px solid #fff}

/* Header: sticky, dark glass, gold hairline */
.bq-header{position:sticky;top:0;background:rgba(20,17,21,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,166,70,.18)}
.bq-header a{color:#D9D1C4}.bq-header a:hover,.bq-header a.active{color:var(--bq-gold-light)}
/* Dropdown: white card, gold top border, gold wash hover */
.bq-dropdown{background:#fff;border-radius:12px;border-top:3px solid var(--bq-gold);box-shadow:0 18px 40px rgba(20,17,21,.22);padding:8px;min-width:250px}
.bq-dropdown a{color:var(--bq-ink);padding:10px 14px;border-radius:8px}
.bq-dropdown a:hover{background:var(--bq-gold-wash);color:var(--bq-gold-dark)}