/* =========================================================
   WHAT WE DO SCROLL — DESIGN VARIABLES
   =========================================================
   This is the single place that defines every color, font,
   spacing, radius, shadow and motion value the plugin uses.
   style.css never hardcodes a visual value — it only ever
   reads these variables (with a safe fallback baked in, in
   case this file fails to load for any reason).

   You can change the design in two ways:

   1. EASIEST — Settings > What We Do Scroll > "Design & Styling".
      Anything you set there is injected as an override AFTER
      this file, so it always wins without you touching any code.

   2. DIRECT — edit the values below. This changes the DEFAULT
      look everywhere the plugin is used (shortcode + Elementor
      widget), for anyone who hasn't overridden a given value in
      the admin screen.

   Everything is scoped under .wwds-scope, so none of this can
   ever leak out and affect the rest of your WordPress site.
========================================================= */
.wwds-scope {

  /* ---------------------------------------------------------
     COLORS
  --------------------------------------------------------- */
  /* Base page background (the light "cream" sections) */
  --wwds-color-bg: #F3F0E9;

  /* Section / card backgrounds */
  --wwds-color-surface: #F3F0E9;          /* light section bg (cream panel, intro, hero-overlay area) */
  --wwds-color-surface-alt: #FBFAF6;      /* alternate light card bg (the "off-white" panel) */
  --wwds-color-surface-dark: #17243A;     /* dark section bg (hero, navy panel, closing CTA) */
  --wwds-color-surface-accent: #DDE48A;   /* accent card bg (the "lime" panel) */

  /* Text */
  --wwds-color-text: #14181F;                       /* base text on light backgrounds */
  --wwds-color-text-soft: rgba(20, 24, 31, 0.62);   /* muted / secondary text on light backgrounds */
  --wwds-color-text-on-dark: #F3F0E9;               /* base text on dark backgrounds */
  --wwds-color-text-on-dark-soft: rgba(243, 240, 233, 0.7);
  --wwds-color-heading: var(--wwds-color-text);     /* heading color on light backgrounds */
  --wwds-color-heading-on-dark: #FFFFFF;            /* heading color on dark backgrounds */

  /* Accents / highlights */
  --wwds-color-accent: #FF4B45;      /* primary accent — link hover, highlight */
  --wwds-color-accent-2: #147D87;    /* secondary accent — eyebrow / small label */

  /* Borders */
  --wwds-color-border: rgba(20, 24, 31, 0.14);
  --wwds-color-border-soft: rgba(20, 24, 31, 0.18);
  --wwds-color-border-on-dark: rgba(255, 255, 255, 0.4);

  /* Links */
  --wwds-color-link: var(--wwds-color-text);
  --wwds-color-link-hover: var(--wwds-color-accent);

  /* Icons (arrows, bullets) — default to inheriting the surrounding text color */
  --wwds-color-icon: currentColor;

  /* Buttons (the closing CTA button) */
  --wwds-color-button-bg: transparent;
  --wwds-color-button-text: #FFFFFF;
  --wwds-color-button-border: var(--wwds-color-border-on-dark);
  --wwds-color-button-bg-hover: #FFFFFF;
  --wwds-color-button-text-hover: var(--wwds-color-surface-dark);
  --wwds-color-button-border-hover: #FFFFFF;

  /* Scroll-progress indicator */
  --wwds-color-progress-track: var(--wwds-color-border-soft);
  --wwds-color-progress-fill: var(--wwds-color-text);
  --wwds-color-progress-label: var(--wwds-color-text-soft);
  --wwds-color-progress-label-active: var(--wwds-color-text);

  /* Reserved for any future form fields (kept for architectural completeness) */
  --wwds-color-input-bg: #FFFFFF;
  --wwds-color-input-text: var(--wwds-color-text);
  --wwds-color-input-border: var(--wwds-color-border);
  --wwds-color-input-placeholder: rgba(20, 24, 31, 0.45);

  /* ---------------------------------------------------------
     TYPOGRAPHY
  --------------------------------------------------------- */
  --wwds-font-display: 'Fraunces', Georgia, serif;   /* big serif headings */
  --wwds-font-body: 'Manrope', system-ui, sans-serif; /* body copy, labels, buttons */

  --wwds-font-weight-body: 400;
  --wwds-font-weight-medium: 500;
  --wwds-font-weight-semibold: 600;
  --wwds-font-weight-bold: 700;

  --wwds-font-size-base: 17px;     /* paragraph / description text */
  --wwds-font-size-small: 14px;    /* feature list items, nav links */
  --wwds-font-size-xsmall: 13px;   /* eyebrow / meta labels */

  --wwds-line-height-base: 1.6;
  --wwds-line-height-heading: 1.15;
  --wwds-line-height-display: 0.95;

  --wwds-letter-spacing-tight: -0.01em;
  --wwds-letter-spacing-tighter: -0.02em;
  --wwds-letter-spacing-wide: 0.12em;
  --wwds-letter-spacing-wider: 0.22em;

  --wwds-text-transform-label: uppercase;

  /* Responsive display sizes — each is already a full clamp() so the
     existing mobile/tablet scaling is preserved. Override the whole
     value if you want different min/preferred/max sizes. */
  --wwds-font-size-hero-title: clamp(40px, 6.5vw, 96px);
  --wwds-font-size-intro-heading: clamp(34px, 5vw, 68px);
  --wwds-font-size-panel-title: clamp(70px, 11vw, 190px);
  --wwds-font-size-panel-title-tablet: clamp(56px, 12vw, 110px);
  --wwds-font-size-panel-title-mobile: clamp(48px, 16vw, 80px);
  --wwds-font-size-cta-heading: clamp(32px, 5vw, 56px);
  --wwds-font-size-button: 16px;
  --wwds-font-size-logo: 15px;

  /* ---------------------------------------------------------
     LAYOUT & SPACING
  --------------------------------------------------------- */
  --wwds-container-max: 1500px;        /* hero / header / progress bar container */
  --wwds-container-max-narrow: 1200px; /* intro section container */
  --wwds-container-max-cta: 900px;     /* closing CTA container */
  --wwds-container-width: 92%;         /* side gutter as a % on wide containers */
  --wwds-container-width-narrow: 90%;

  --wwds-section-padding-y: 160px;         /* intro + closing CTA vertical padding (desktop) */
  --wwds-section-padding-y-bottom: 120px;  /* intro section bottom padding (desktop) */
  --wwds-section-padding-y-mobile: 100px;
  --wwds-section-padding-y-mobile-bottom: 70px;

  --wwds-panel-padding-x: min(6vw, 100px);       /* left/right padding inside each slide (desktop) */
  --wwds-panel-padding-x-tablet: min(6vw, 60px);
  --wwds-panel-gap: 60px;                        /* gap between text and image in a slide (desktop) */
  --wwds-panel-gap-tablet: 32px;
  --wwds-panel-gap-mobile: 26px;

  --wwds-content-gap-heading: 56px;   /* space below the intro heading */
  --wwds-content-gap-desc: 32px;      /* space below a slide's description */
  --wwds-content-gap-title: 28px;     /* space below a slide's title */
  --wwds-content-gap-meta: 26px;      /* space below the number/label row */

  --wwds-radius-sm: 4px;      /* slide image corners */
  --wwds-radius-pill: 100px;  /* CTA button */
  --wwds-border-width: 1px;

  --wwds-shadow-card: none;   /* slide image / card shadow (off by default, matches original design) */
  --wwds-shadow-button: none; /* CTA button shadow */

  /* ---------------------------------------------------------
     MOTION
  --------------------------------------------------------- */
  --wwds-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --wwds-transition-fast: 0.2s ease;
  --wwds-transition-base: 0.4s ease;
  --wwds-transition-slow: 0.6s ease;

  /* ---------------------------------------------------------
     Root-level application of the tokens above
  --------------------------------------------------------- */
  background: var(--wwds-color-bg);
  color: var(--wwds-color-text);
  font-family: var(--wwds-font-body);
}