/* ==========================================================================
   CARUSELE SHARED STYLESHEET  ·  v1.0  ·  carusele.css
   One source of truth for WordPress (carusele.com) and HubSpot (landing
   pages, email templates, CTAs). Every token below is extracted from the
   Carusele design system as used on the new home page.

   INSTALL — WordPress (child theme functions.php):
     add_action('wp_enqueue_scripts', function () {
       wp_enqueue_style('carusele', 'https://carusele.com/assets/css/carusele.css', [], '1.0');
     });

   INSTALL — HubSpot: upload to Design Manager, then in the template head
     {{ require_css(get_asset_url('/carusele/carusele.css')) }}
   or paste the URL into Settings > Website > Pages > Templates > Stylesheets
   so it applies site-wide.

   RULES OF THE ROAD
   1. Never hard-code a hex, px radius, or shadow in a page or module.
      Use var(--token). If a value you need isn't here, add it here first.
   2. Bump the version comment and the ?ver= / cache-busting query on both
      platforms together, so the two never drift.
   3. Platform-specific overrides belong in a separate file that loads AFTER
      this one. Do not fork this file.

   FONTS — Poppins (display), Mulish (body), IBM Plex Mono (metrics) are the
   Carusele brand faces. Google Fonts, open licensed, free to use on every
   platform, in email, and by outside partners. Self-host the files when
   convenient: same fonts, one less third-party connection.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* --- Brand core --- */
  --carusele-orange: #F48120;
  --carusele-yellow: #FDC90B;
  --carusele-amber:  #F6A704;
  --carusele-red:    #E5401E;

  /* --- Orange ramp --- */
  --orange-50:  #FEF3E6;
  --orange-100: #FDE1C0;
  --orange-200: #FBC488;
  --orange-300: #F9A64F;
  --orange-400: #F48120;
  --orange-500: #DB6E12;
  --orange-600: #B4570B;
  --orange-700: #8A4308;

  /* --- Yellow ramp --- */
  --yellow-50:  #FFF8DC;
  --yellow-100: #FEEDA6;
  --yellow-200: #FDDD5A;
  --yellow-300: #FDC90B;
  --yellow-400: #E4B106;
  --yellow-500: #B88C04;

  /* --- Red accent ramp --- */
  --red-100: #FBD9CF;
  --red-300: #F07D5F;
  --red-400: #E5401E;
  --red-500: #C22F11;

  /* --- Warm neutral ramp (amber-tinted grays) --- */
  --ink-950: #17130F;
  --ink-900: #241E18;
  --ink-800: #362D24;
  --ink-700: #4C4136;
  --ink-600: #6B5D4F;
  --ink-500: #8A7C6D;
  --ink-400: #ADA192;
  --ink-300: #CFC6B9;
  --ink-200: #E7E0D6;
  --ink-100: #F3EEE6;
  --ink-50:  #FAF7F1;
  --paper:   #FFFFFF;

  /* --- Status --- */
  --success: #2E9E5B;  --success-bg: #E4F4EA;
  --warning: #E4B106;  --warning-bg: #FDF4D4;
  --danger:  #D5361A;  --danger-bg:  #FBE1DA;
  --info:    #2C74C4;  --info-bg:    #E1EDFA;

  /* --- Semantic aliases: reference these in modules, not raw ramps --- */
  --brand-primary:       var(--carusele-orange);
  --brand-primary-hover: var(--orange-500);
  --brand-primary-press: var(--orange-600);
  --brand-secondary:     var(--carusele-yellow);
  --brand-accent:        var(--carusele-red);

  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--paper);
  --text-on-brand:  #FFFFFF;
  --text-on-yellow: var(--ink-900);
  --text-link:      var(--orange-600);

  --surface-page:   var(--paper);
  --surface-warm:   var(--ink-50);
  --surface-card:   var(--paper);
  --surface-sunken: var(--ink-100);
  --surface-brand:  var(--carusele-orange);
  --surface-ink:    var(--ink-900);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--carusele-orange);
  --focus-ring:    var(--orange-400);

  --gradient-brand:  linear-gradient(100deg, #FDC90B 0%, #F6A704 42%, #F48120 100%);
  --gradient-sunset: linear-gradient(135deg, #FDC90B 0%, #F48120 55%, #E5401E 100%);

  /* --- Type --- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.5rem;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* --- Spacing (4px base) --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter:    var(--space-8);
  --section-y: var(--space-20);

  /* --- Radius --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Shadow (warm-tinted) --- */
  --shadow-xs: 0 1px 2px rgba(36, 30, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(36, 30, 24, 0.08), 0 1px 2px rgba(36, 30, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(36, 30, 24, 0.10), 0 2px 4px rgba(36, 30, 24, 0.06);
  --shadow-lg: 0 12px 28px rgba(36, 30, 24, 0.12), 0 6px 10px rgba(36, 30, 24, 0.07);
  --shadow-xl: 0 24px 56px rgba(36, 30, 24, 0.16), 0 10px 20px rgba(36, 30, 24, 0.08);
  --shadow-brand:    0 8px 24px rgba(244, 129, 32, 0.32);
  --shadow-brand-sm: 0 3px 10px rgba(244, 129, 32, 0.28);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 520ms;
}

/* ==========================================================================
   2 · BASE
   Scoped defaults. HubSpot templates and the WP theme both start here.
   ========================================================================== */
.cs,
body.cs {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cs h1, .cs h2, .cs h3, .cs h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.cs h1 { font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: var(--leading-tight); }
.cs h2 { font-size: clamp(1.9rem, 3vw, var(--text-2xl)); }
.cs h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.cs h4 { font-size: var(--text-base); font-weight: var(--fw-bold); }

.cs p { margin: 0 0 var(--space-4); text-wrap: pretty; }
.cs strong { color: var(--text-heading); font-weight: var(--fw-bold); }
.cs small { font-size: var(--text-sm); color: var(--text-muted); }

.cs a { color: var(--text-link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.cs a:hover { color: var(--carusele-red); }
.cs a:focus-visible,
.cs :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

.cs ul.cs-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.cs ul.cs-list li { position: relative; padding-left: var(--space-6); }
.cs ul.cs-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--brand-primary);
}

/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */
.cs-wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.cs-wrap--narrow { max-width: var(--container-narrow); }
.cs-section { padding-block: var(--section-y); }
.cs-section--warm { background: var(--surface-warm); }
.cs-section--ink  { background: var(--surface-ink); color: rgba(255,255,255,0.86); }
.cs-section--ink h1, .cs-section--ink h2, .cs-section--ink h3 { color: var(--paper); }
.cs-grid { display: grid; gap: var(--space-5); }
.cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .cs-grid--3, .cs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --section-y: var(--space-12); }
}
@media (max-width: 560px) {
  .cs-grid--2, .cs-grid--3, .cs-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4 · TYPE ROLES
   ========================================================================== */
.cs-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 var(--space-3);
}
.cs-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink-600); }
.cs-metric {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}
.cs-metric-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-gradient-text {
  background: var(--gradient-sunset);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   5 · COMPONENTS
   ========================================================================== */

/* Buttons */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.cs-btn--lg { font-size: var(--text-base); padding: var(--space-4) var(--space-8); }
.cs-btn--primary { background: var(--brand-primary); color: var(--text-on-brand); box-shadow: var(--shadow-brand-sm); }
.cs-btn--primary:hover { background: var(--brand-primary-hover); color: var(--text-on-brand); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.cs-btn--primary:active { background: var(--brand-primary-press); transform: translateY(0) scale(0.98); }
.cs-btn--secondary { background: var(--paper); color: var(--text-heading); border-color: var(--border-subtle); }
.cs-btn--secondary:hover { background: var(--ink-100); color: var(--text-heading); }
.cs-btn--dark { background: var(--ink-900); color: var(--paper); }
.cs-btn--dark:hover { background: var(--ink-800); color: var(--paper); }

/* Cards */
.cs-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cs-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cs-card--accent { border-top: 3px solid var(--brand-primary); }
.cs-card--feature:hover { box-shadow: var(--shadow-brand); }

/* Badges & tags */
.cs-badge, .cs-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.cs-badge { background: var(--orange-50); color: var(--orange-700); }
.cs-badge--yellow { background: var(--yellow-50); color: var(--ink-900); }
.cs-badge--ink { background: var(--ink-100); color: var(--ink-700); }
.cs-tag { background: transparent; border: 1px solid var(--border-subtle); color: var(--ink-600); }

/* Stat block — the signature big-metric pattern */
.cs-stat { display: grid; gap: var(--space-1); }
.cs-stat__value {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--text-2xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}
.cs-stat__label { font-size: var(--text-sm); color: var(--text-muted); }
.cs-stat--ink .cs-stat__value { color: var(--ink-900); }
.cs-stat--red .cs-stat__value { color: var(--carusele-red); }

/* Panels */
.cs-panel { border-radius: var(--radius-xl); padding: var(--space-12); }
.cs-panel--brand { background: var(--gradient-brand); color: var(--text-on-yellow); }
.cs-panel--ink { background: var(--surface-ink); color: rgba(255,255,255,0.86); }

/* Inputs */
.cs-input, .cs-select, .cs-textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-body); background: var(--paper);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus {
  outline: none; border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--orange-100);
}
.cs-label {
  display: block; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); color: var(--text-heading); margin-bottom: var(--space-2);
}

/* Divider */
.cs-rule { height: 1px; background: var(--border-subtle); border: 0; margin-block: var(--space-8); }

/* ==========================================================================
   6 · HUBSPOT FORM NORMALIZATION
   HubSpot injects its own markup; these rules make embedded forms match
   native WordPress forms so the two platforms look identical.
   ========================================================================== */
.cs .hs-form .hs-form-field > label {
  display: block; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); color: var(--text-heading); margin-bottom: var(--space-2);
}
.cs .hs-form input[type="text"],
.cs .hs-form input[type="email"],
.cs .hs-form input[type="tel"],
.cs .hs-form select,
.cs .hs-form textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-body); background: var(--paper);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.cs .hs-form input:focus, .cs .hs-form select:focus, .cs .hs-form textarea:focus {
  outline: none; border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--orange-100);
}
.cs .hs-form .hs-button,
.cs .hs-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-base);
  background: var(--brand-primary); color: var(--text-on-brand);
  border: none; border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-8);
  box-shadow: var(--shadow-brand-sm); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cs .hs-form .hs-button:hover { background: var(--brand-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.cs .hs-form .hs-error-msg { color: var(--danger); font-size: var(--text-sm); }
.cs .hs-form ul.hs-error-msgs { list-style: none; padding: 0; margin: var(--space-2) 0 0; }

/* HubSpot CTA buttons rendered outside a form */
.cs .hs-cta-wrapper a.cta_button {
  font-family: var(--font-display) !important; font-weight: var(--fw-semibold) !important;
  background: var(--brand-primary) !important; color: var(--text-on-brand) !important;
  border: none !important; border-radius: var(--radius-pill) !important;
  padding: var(--space-4) var(--space-8) !important; box-shadow: var(--shadow-brand-sm);
}

/* ==========================================================================
   7 · WORDPRESS BLOCK-EDITOR BRIDGE
   Maps theme.json / core block classes onto the same tokens so content
   authored in Gutenberg inherits the system.
   ========================================================================== */
.cs .has-brand-primary-color { color: var(--brand-primary); }
.cs .has-brand-primary-background-color { background-color: var(--brand-primary); color: var(--text-on-brand); }
.cs .has-brand-yellow-background-color { background-color: var(--carusele-yellow); color: var(--text-on-yellow); }
.cs .has-warm-background-color { background-color: var(--surface-warm); }
.cs .has-ink-background-color { background-color: var(--surface-ink); color: rgba(255,255,255,0.86); }
.cs .wp-block-button__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  background: var(--brand-primary); color: var(--text-on-brand);
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6);
  box-shadow: var(--shadow-brand-sm);
}
.cs .wp-block-button__link:hover { background: var(--brand-primary-hover); color: var(--text-on-brand); }
.cs .wp-block-quote {
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--space-5); margin-inline: 0;
  font-size: var(--text-md); color: var(--ink-600);
}
.cs .wp-block-image img, .cs figure img { border-radius: var(--radius-md); }
.cs .wp-block-separator { border: 0; height: 1px; background: var(--border-subtle); }

/* ==========================================================================
   8 · MOTION SAFETY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   9 · PRINT
   ========================================================================== */
@media print {
  .cs-section { padding-block: var(--space-8); }
  .cs-card { box-shadow: none; border: 1px solid var(--border-strong); }
  .cs-btn { display: none; }
}