/* ============================================================================
   SCENT CENTRAL - GLOBAL DESIGN SYSTEM
   Add this ONCE in Elementor → Site Settings → Custom CSS
   (or your theme's stylesheet). Every section block references these tokens,
   and each block also carries fallback values so it renders standalone.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

/* ---- Self-hosted Avenir (secondary/body font) ----
   Font files deploy to /wp-content/scent-central-assets/fonts/ (see README).
   These absolute paths work site-wide once the assets folder is in place.
   The Scent Finder plugin also ships its own copy so the hero never depends on this. */
@font-face{font-family:'Avenir';font-style:normal;font-weight:300;font-display:swap;src:url('/wp-content/scent-central-assets/fonts/Avenir-Light.ttf') format('truetype');}
@font-face{font-family:'Avenir';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/scent-central-assets/fonts/Avenir-Regular.ttf') format('truetype');}
@font-face{font-family:'Avenir';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/scent-central-assets/fonts/Avenir-Book.ttf') format('truetype');}
@font-face{font-family:'Avenir';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/scent-central-assets/fonts/Avenir-Heavy.ttf') format('truetype');}
@font-face{font-family:'Avenir';font-style:normal;font-weight:900;font-display:swap;src:url('/wp-content/scent-central-assets/fonts/Avenir-Black.ttf') format('truetype');}

:root{
  /* ---- Ink & neutrals (DARK THEME - true black) ---- */
  --sc-ink:        #16181D;   /* DARK surfaces: footer, dark bands, primary-button fallback */
  --sc-fg:         #F2F2F4;   /* primary text / foreground on black */
  --sc-ink-soft:   #C9CBD0;   /* secondary text */
  --sc-muted:      #9A9DA6;   /* body-muted (readable on black) */
  --sc-cream:      #000000;   /* page background (true black) */
  --sc-cream-2:    #08080A;   /* alternate section background (near-black) */
  --sc-surface:    #141418;   /* raised card/panel surface */
  --sc-white:      #FFFFFF;
  --sc-blue-cta:   #6FB7DE;   /* lighter blue for eyebrows / links / accents on black */

  /* ---- Brand accents (the two Scent Central pastels) ---- */
  --sc-blue:       #A2D2E8;   /* accent 1 - pastel blue */
  --sc-blue-deep:  #5FA9C9;   /* deeper blue for borders / hover (decorative) */
  --sc-pink:       #CDB5C2;   /* accent 2 - pastel pink */
  --sc-pink-deep:  #B893A6;   /* deeper pink */

  /* ---- Lines, glass, shadow ---- */
  --sc-line:       #2A2A31;   /* hairline borders on black */
  --sc-glass:        rgba(20,20,26,0.55);
  --sc-glass-strong: rgba(20,20,26,0.72);
  --sc-glass-border: rgba(255,255,255,0.12);
  --sc-shadow-sm:  0 2px 10px rgba(0,0,0,.40);
  --sc-shadow-md:  0 14px 40px rgba(0,0,0,.50);
  --sc-shadow-lg:  0 30px 80px rgba(0,0,0,.60);

  /* ---- Type ----
     PRIMARY  = Montserrat  (headings, display, UI, buttons, labels)
     SECONDARY = Avenir Regular (body copy, subheads, descriptions)
     NOTE: Avenir is a licensed font (present on macOS/iOS by default). For it to
     render for ALL visitors in production, host it via Adobe Fonts or self-host the
     licensed webfont files. Until then it gracefully falls back to Montserrat. */
  --sc-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sc-serif: 'Montserrat', system-ui, sans-serif;
  --sc-body: 'Avenir', 'Avenir Next', 'Avenir LT Std', -apple-system, BlinkMacSystemFont, 'Montserrat', sans-serif;

  /* ---- Rhythm ---- */
  --sc-radius: 18px;
  --sc-radius-sm: 12px;
  --sc-radius-pill: 999px;
  --sc-maxw: 1200px;
  --sc-gutter: clamp(20px, 5vw, 64px);
  --sc-section-y: clamp(64px, 9vw, 120px);

  /* ---- Soft botanical wash (cream → blue → pink) ---- */
  --sc-botanical: radial-gradient(120% 120% at 15% 10%, #0B0B0E 0%, #060608 45%, #000000 75%);
}

/* Helpful when pasting blocks into Elementor: kill default widget padding clashes */
.sc-block *{box-sizing:border-box;}

/* DARK THEME: force the ultimate page background to true black so no light theme
   background peeks through between/around sections or behind rounded corners. */
html,body{background-color:#000 !important;}
body,.site,#page,.elementor,.e-con,.elementor-section,main{background-color:#000;}

/* ----------------------------------------------------------------------------
   SECONDARY FONT (Avenir) applied to body copy across all pasted blocks.
   Headings/UI keep the PRIMARY font (Montserrat) inherited from each section root.
   Scoped to .sc-block so it never touches WP admin or theme chrome.
   ---------------------------------------------------------------------------- */
.sc-block p,
.sc-block li,
.sc-block blockquote,
.sc-block input,
.sc-block textarea,
.sc-block select,
.sc-block .lead,
.sc-block .lab,
.sc-block .ans,
.sc-block .pf,
.sc-block .ro,
.sc-block .blurb,
.sc-block .sc-sub,
.sc-block .scf-sub,
.sc-block .scf-subhead,
.sc-block .scf-input-text,
.sc-block .scf-option-desc,
.sc-block .scf-reveal-desc,
.sc-block .scf-reveal-secondary,
.sc-block .scf-consent,
.sc-block .scf-trustline{
  font-family: var(--sc-body, 'Avenir', 'Avenir Next', -apple-system, 'Montserrat', sans-serif);
}