/* GENERATED by docs/skills/tools/ds_split.js from public/vendor/shopdot-ds/foundation/colors_and_type.css - do not edit.
   Global layer: :root tokens, font @imports, @keyframes.
   Regenerate after a DS sync: node docs/skills/tools/ds_split.js */

@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
  /* ─── Brand & Primary — Deep Tangerine ────────────────────────── */
  /* The hero hue. Reserved for branding, primary CTAs, key actions,
     section accents and the underline on active tabs. */
  --sd-primary:        #e15439;   /* 600 — base brand */
  --sd-primary-25:     #fff9f9;
  --sd-primary-100:    #fee7e2;
  --sd-primary-200:    #ffd2c9;
  --sd-primary-300:    #fdb2a4;
  --sd-primary-400:    #f98670;
  --sd-primary-500:    #f15e42;
  --sd-primary-600:    #e15439;
  --sd-primary-700:    #bb341a;   /* button border, pressed state */
  --sd-primary-800:    #9a2f1a;
  --sd-primary-900:    #802c1c;
  --sd-primary-950:    #461309;

  /* Orange as TEXT on light surfaces — the full 600 fails AA at body
     size on cream/white. Bind small orange text (eyebrows, links, tags)
     here, not --sd-primary. Large/bold display uses (stats, headline
     payoff words) may keep the full 600. */
  --sd-primary-text:   #c0442a;
  --sd-primary-hover:  #cf4a32;   /* hover for primary fills — 600 → slightly darker */

  /* ─── Neutrals — Light Charcoal ───────────────────────────────── */
  /* Default text, dark backgrounds, dividers. The 950 sits at #2C2F32
     — near-black but warmer than pure black, used as default body text. */
  --sd-neutral:        #2c2f32;
  --sd-neutral-25:     #fafbfb;
  --sd-neutral-50:     #f5f6f6;
  --sd-neutral-100:    #e5e7e8;   /* hairline borders */
  --sd-neutral-200:    #cdd1d4;   /* button borders */
  --sd-neutral-300:    #aab2b6;
  --sd-neutral-400:    #808b90;
  --sd-neutral-500:    #657075;   /* muted body */
  --sd-neutral-600:    #565e64;   /* secondary body */
  --sd-neutral-700:    #4a5054;
  --sd-neutral-800:    #414549;
  --sd-neutral-900:    #393c40;
  --sd-neutral-950:    #2c2f32;   /* primary text */

  /* ─── Semantic ────────────────────────────────────────────────── */
  --sd-success:        #3c704b;   /* Deep Forest Green */
  --sd-success-50:     #f9fbf9;
  --sd-success-100:    #dfece0;
  --sd-success-300:    #b3d1b6;   /* mid tint — merch/product gradient stop */
  --sd-success-400:    #7ab089;   /* mid green — product-image gradient stop */
  --sd-success-700:    #2b5137;

  --sd-warning:        #e3a008;   /* Golden Amber */
  --sd-warning-50:     #fffff5;
  --sd-warning-100:    #fefcc7;

  --sd-info:           #2a7f74;   /* Dark Teal */
  --sd-info-50:        #f9fdfc;
  --sd-info-100:       #d5f2eb;

  --sd-error:          #c0392b;   /* Muted Crimson Red */
  --sd-error-50:       #fef9f9;
  --sd-error-100:      #fce6e4;

  /* ─── Secondary palette (decorative accents) ──────────────────── */
  /* Each secondary hue ships with a soft -100 tint so it can carry
     the same 2-stop gradient pattern as the primary ramp.
     -100 values corrected 2026-06-07 to the official ramps in
     "Branded Colors - HEX Codes" — the previous values were copy-paste
     duplicates of OTHER hues' tints (verified unconsumed downstream). */
  --sd-indigo:         #4b527e;   /* Deep Indigo Blue — paw mark in logo.
                                     Full ramp (incl. -100) lives in the
                                     INDIGO ACCENT block at the bottom. */
  --sd-clay:           #a44d2a;   /* Burnt Clay */
  --sd-clay-100:       #f5e8d0;
  --sd-olive:          #7b8a3c;   /* Earthy Olive */
  --sd-olive-100:      #ecefd8;
  --sd-peach:          #f4a783;   /* Warm Peach */
  --sd-peach-100:      #fce6d8;
  --sd-mist:           #5d7d92;   /* Misty Blue */
  --sd-mist-100:       #e1e8ec;

  /* ─── Surfaces & soft backgrounds ─────────────────────────────── */
  --sd-bg:             #ffffff;
  --sd-bg-cream:       #fdfbf7;   /* hero soft cream */
  --sd-bg-blush:       #fef4ee;   /* DEPRECATED for section bands (§23) AND hero/banner
                                     gradients (2026-06-07 — Michelle: blush-tinted banners
                                     read pastel/feminine). Wash band or --sd-grad-cream is
                                     canonical; OK inside mockup/thumb gradients ONLY —
                                     card fills (incl. featured testimonials) also read
                                     pink at card scale (2026-06-07 follow-up). */
  --sd-bg-blush-2:     #fff4f2;   /* lighter blush — same deprecation */
  --sd-bg-mute:        #fafbfb;   /* footer / FAQ background */
  --sd-bg-card:        #ffffff;
  --sd-surface-dark:   #2c2f32;   /* dark surface — hero, CTA banner, dark tiles */
  --sd-scrim-warm:     #14110f;   /* warm-charcoal photo/video scrim base — hero
                                     video hold + rgba(20,17,15,…) scrim stops */

  /* Pre-mixed gradient recipes — use these instead of inline gradients. */
  --sd-grad-cream:     linear-gradient(180deg, #ffffff 0%, var(--sd-bg-cream) 100%);
  --sd-grad-primary:   linear-gradient(135deg, var(--sd-primary-100), var(--sd-primary-400));
  --sd-grad-primary-text: linear-gradient(95deg, #ffd9c8 0%, #f98670 50%, #e15439 100%);

  /* Decorative blob colors. Use the pre-mixed soft/medium variants
     directly — do NOT layer additional opacity. */
  --sd-blob-peach:        rgb(245,175,161);
  --sd-blob-peach-soft:   rgba(245,175,161,0.18);
  --sd-blob-peach-medium: rgba(245,175,161,0.30);
  --sd-blob-amber:        rgba(227,160,8,0.6);
  --sd-blob-amber-soft:   rgba(227,160,8,0.20);
  --sd-blob-amber-medium: rgba(227,160,8,0.30);

  /* ─── Foreground tokens ───────────────────────────────────────── */
  --sd-fg:                  var(--sd-neutral-950);  /* primary text */
  --sd-fg-muted:            var(--sd-neutral-600);  /* secondary copy / supporting */
  --sd-fg-subtle:           var(--sd-neutral-500);
  --sd-fg-on-primary:       #ffffff;
  --sd-fg-on-dark:          #ffffff;
  --sd-fg-on-dark-muted:    rgba(255,255,255,0.78); /* body text on dark surfaces */
  --sd-fg-on-dark-subtle:   rgba(255,255,255,0.55); /* eyebrow / labels on dark */

  /* Status text colors — use these for body/inline copy, not the
     decorative -500/600 tokens. */
  --sd-success-text:   var(--sd-success-700);
  --sd-warning-text:   #8a5d04;                    /* warning is decorative-only */

  /* ─── Borders ─────────────────────────────────────────────────── */
  --sd-border:         var(--sd-neutral-100);  /* default hairline */
  --sd-border-strong:  var(--sd-neutral-200);  /* button outlines */
  --sd-border-divider: var(--sd-neutral-100);
  --sd-border-on-dark: rgba(255,255,255,0.08); /* hairline on dark surfaces */

  /* ─── Type ────────────────────────────────────────────────────── */
  --sd-font-sans: "General Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sd-font-display: "General Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Weight scale — General Sans ships 400/500/600/700; Inter fallback covers
     the same range. Figma compositions use Regular/Medium/Semibold/Bold. */
  --sd-fw-light:    400;  /* General Sans has no 300 — alias light → regular */
  --sd-fw-regular:  400;
  --sd-fw-medium:   500;
  --sd-fw-semibold: 600;
  --sd-fw-bold:     700;

  /* Type scale — taken directly from the Figma. */
  --sd-text-xs:    12px;   /* tooltips, breadcrumbs */
  --sd-text-sm:    14px;   /* small body, secondary buttons, nav, success/error */
  --sd-text-base:  16px;   /* body, primary buttons, labels */
  --sd-text-md:    18px;   /* lead paragraph */
  --sd-text-lg:    20px;   /* section subtitle */
  --sd-text-xl:    24px;   /* card titles */
  --sd-text-2xl:   28px;   /* large card titles */
  --sd-text-3xl:   34px;   /* H3 / sub-section */
  --sd-text-4xl:   44px;   /* H2 */
  --sd-text-5xl:   54px;   /* section H1 (e.g. "Build for Pet Professionals") */
  --sd-text-6xl:   74px;   /* hero display ("Turn Your Pet Expertise Into Revenue") */
  --sd-text-7xl:  100px;   /* page-banner display ("Color", "Font") */

  /* Line heights */
  --sd-lh-tight:   1.0;    /* display & section H1s use 100% or 64px on 54 */
  --sd-lh-snug:    1.18;   /* hero 84/74 */
  --sd-lh-normal:  1.4;
  --sd-lh-relaxed: 1.7;    /* 34px on 20px subtitles */

  /* Letter-spacing — General Sans at large display sizes benefits from
     a slight negative tracking; body copy at 16px needs none. */
  --sd-tracking-tight:  -0.01em;
  --sd-tracking-normal: 0;

  /* ─── Radius ──────────────────────────────────────────────────── */
  --sd-radius-xs:   2px;
  --sd-radius-sm:   4px;    /* buttons, inputs — the dominant radius */
  --sd-radius-md:   8px;
  --sd-radius-lg:   12px;
  --sd-radius-xl:   16px;   /* product cards, professional cards */
  --sd-radius-2xl:  24px;
  --sd-radius-pill: 9999px; /* circular nav arrows, pills */

  /* ─── Spacing ─────────────────────────────────────────────────── */
  --sd-space-0:   0;
  --sd-space-1:   4px;
  --sd-space-2:   8px;
  --sd-space-3:   12px;
  --sd-space-4:   16px;
  --sd-space-5:   20px;
  --sd-space-6:   24px;
  --sd-space-8:   32px;
  --sd-space-10:  40px;
  --sd-space-12:  48px;
  --sd-space-16:  64px;
  --sd-space-20:  80px;    /* section vertical padding */
  --sd-space-24:  96px;
  --sd-space-32: 128px;    /* major section spacing */

  /* Section content max-width — 1170px is the canonical content frame. */
  --sd-container:      1170px;
  --sd-container-md:    970px;  /* FAQ / testimonial column */
  --sd-container-sm:    670px;  /* hero subtitle width */
  --sd-container-wide: 1568px;  /* nav bar / full-bleed marquees */

  /* Canonical section vertical rhythm. Use this instead of
     hand-picking 80/100/120 each time. */
  --sd-section-y:      var(--sd-space-32);  /* 128px */
  --sd-section-y-sm:   var(--sd-space-20);  /*  80px — compact sections */
  /* Hero vertical rhythm — top clears the 72px fixed nav + breathing room.
     Bind every page hero here instead of hand-picking 120/132/152. */
  --sd-hero-pad-top:    var(--sd-space-32);  /* 128px */
  --sd-hero-pad-bottom: var(--sd-space-20);  /*  80px */

  /* ─── Elevation / shadows ─────────────────────────────────────── */
  /* All shadows are warm-charcoal-tinted, very soft. */
  --sd-shadow-xs:  0 1px 2px 0 rgba(44,47,50,0.05);   /* button rest */
  --sd-shadow-sm:  0 1px 3px 0 rgba(44,47,50,0.08), 0 1px 2px 0 rgba(44,47,50,0.04);
  --sd-shadow-md:  0 4px 12px 0 rgba(44,47,50,0.06), 0 2px 4px 0 rgba(44,47,50,0.04);
  --sd-shadow-lg:  0 12px 24px 0 rgba(44,47,50,0.08), 0 4px 8px 0 rgba(44,47,50,0.04);
  --sd-shadow-xl:  0 30px 44px 0 rgba(0,0,0,0.05);    /* feature cards (Figma) */
  --sd-shadow-hover: 0 18px 36px 0 rgba(44,47,50,0.08); /* card hover-lift target */
  --sd-shadow-primary-soft: 0 1px 2px 0 rgba(187,52,26,0.05);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --sd-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);   /* gentle, slightly bouncy */
  --sd-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --sd-ease-linear: linear;
  --sd-dur-fast:    120ms;
  --sd-dur-base:    200ms;
  --sd-dur-slow:    320ms;
  --sd-dur-reveal:  700ms;  /* scroll-reveal entrance */

  /* ─── Fluid type pairs ───────────────────────────────────────── */
  /* Decision: keep the named fixed scale as the source of truth, but
     ship fluid pairs that clamp BETWEEN named steps so responsive
     pages can't invent off-scale sizes. */
  --sd-text-h2-fluid:      clamp(var(--sd-text-3xl), 4.4vw, var(--sd-text-5xl)); /* 34→54 */
  --sd-text-h1-fluid:      clamp(var(--sd-text-4xl), 4vw,   var(--sd-text-5xl)); /* 44→54 */
  --sd-text-display-fluid: clamp(var(--sd-text-5xl), 6.2vw, var(--sd-text-6xl)); /* 54→74 */
  --sd-text-hero-sub:      clamp(var(--sd-text-md), 1.6vw, var(--sd-text-lg));   /* 18→20 — every hero subhead */
  /* Section heading tiers — bind section h2/h3 here instead of per-page clamps. */
  --sd-text-section:       clamp(28px, 3.4vw, 42px);  /* standard section title (h2) */
  --sd-text-section-lg:    clamp(32px, 4vw,   48px);  /* CTA / pitch section title */
  --sd-text-section-sub:   clamp(24px, 2.6vw, 34px);  /* subsection / card title (h3) */
}
@keyframes sdMarqueeScroll {
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes sdPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(225,84,57,0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(225,84,57,0.05); }
}
:root {
  /* Indigo ramp — same shape as the primary ramp */
  --sd-indigo-50:   #f3f4f9;
  --sd-indigo-100:  #e3e5ef;   /* icon-tile backgrounds, eyebrow pill bg */
  --sd-indigo-200:  #c8ccdd;
  --sd-indigo-300:  #a0a6c4;
  --sd-indigo-500:  #4b527e;   /* base — same value as --sd-indigo */
  --sd-indigo-600:  #3c4268;   /* hover / pressed state */
  --sd-indigo-700:  #2f3450;
  --sd-indigo-800:  #232847;
  --sd-indigo-900:  #1b1f3a;

  /* Indigo-tinted shadow variants. Same shape as --sd-shadow-* but
     with the rgba tinted toward indigo. Apply page-wide on B2B
     surfaces to give cards a slightly cooler atmosphere. */
  --sd-shadow-sm-indigo: 0 1px 3px 0 rgba(75,82,126,0.10), 0 1px 2px 0 rgba(75,82,126,0.05);
  --sd-shadow-md-indigo: 0 4px 12px 0 rgba(75,82,126,0.10), 0 2px 4px 0 rgba(75,82,126,0.05);
  --sd-shadow-lg-indigo: 0 12px 24px 0 rgba(75,82,126,0.14), 0 4px 8px 0 rgba(75,82,126,0.06);
  --sd-shadow-xl-indigo: 0 30px 44px 0 rgba(75,82,126,0.14);

  /* Cool-cream hero gradient base — pairs with indigo accents */
  --sd-bg-cool:      #f6f6fb;
  --sd-grad-cool:    linear-gradient(180deg, #ffffff 0%, var(--sd-bg-cool) 100%);

  /* ─── ON-DEEP — foregrounds for deep/dark slide surfaces (--sd-deep) ───
     Promoted 2026-06-07 from media/deck.css hardcoded values, so a brand
     whose --sd-deep isn't indigo can override them. */
  --sd-fg-on-deep:            #ffffff;
  --sd-fg-muted-on-deep:      #c2c6e2;   /* cool/indigo pair — bg-deep slides */
  --sd-fg-muted-on-deep-warm: #c8ccd0;   /* warm pair — bg-dark slides */
  --sd-fg-subtle-on-deep:     #9398b8;
  --sd-fg-pill-on-deep:       var(--sd-indigo-100);  /* #e3e5ef */
  --sd-hairline-on-deep:      rgba(227,229,239,0.16);
}