/* AgentZap Carousel Design System — colors + type tokens */

/* ---------- Fonts ---------- */
/* Headings (editorial / carousel hero): Playfair Display */
/* Body (sans-serif, premium SaaS): Plus Jakarta Sans / Inter */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand color core ---------- */
  --orange:          #E8612D;   /* primary CTA / accent (website) */
  --orange-hover:    #F07040;
  --burnt-orange:    #C0511A;   /* editorial / print accent (infographic) */
  --deep-red:        #8B2500;
  --rust:            #A0522D;

  /* ---------- Warm editorial palette (carousel body) ---------- */
  --page-cream:      #F5F0E6;
  --card-white:      #FFFFFF;
  --card-warm:       #FDF6ED;
  --card-blush:      #FAF0EA;
  --card-terracotta: #C27A52;
  --card-dark:       #2C2C2C;
  --dark-hero:       #1A1210;
  --dark-hero-edge:  #0F0B08;
  --dark-hero-glow:  #2A1D15;

  /* ---------- Secondary / status ---------- */
  --sage:            #7A8B6F;
  --olive:           #6B7F5E;
  --teal-muted:      #5F7A72;
  --active-red:      #D94F30;
  --done-green:      #6B8F5E;
  --highlight:       #F2D06B;
  --green-check:     #4CAF50;
  --green-badge:     #2E9E3F;

  /* ---------- Neutrals ---------- */
  --charcoal:        #2C2C2C;
  --dark-brown:      #3D2B1F;
  --gray-med:        #6B6B6B;
  --gray-light:      #B0A898;
  --beige:           #D4C9B8;
  --white:           #FFFFFF;
  --border-soft:     rgba(0,0,0,0.08);
  --border-dark:     rgba(255,255,255,0.08);

  /* ---------- Semantic tokens ---------- */
  --bg-page:         var(--page-cream);
  --bg-card:         var(--card-white);
  --fg-1:            var(--charcoal);         /* primary text */
  --fg-2:            var(--gray-med);         /* secondary text */
  --fg-3:            var(--gray-light);       /* tertiary text */
  --fg-inverse:      var(--white);
  --accent:          var(--orange);
  --accent-ink:      var(--burnt-orange);     /* accent for print/editorial */

  /* ---------- Type families ---------- */
  --font-serif:      'Playfair Display', 'DM Serif Display', Georgia, serif;
  --font-sans:       'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type scale (Instagram 1080×1350 carousel) ---------- */
  --fs-hero:         88px;    /* carousel cover hero */
  --fs-h1:           64px;
  --fs-h2:           48px;
  --fs-h3:           36px;
  --fs-title:        28px;
  --fs-body-lg:      24px;
  --fs-body:         20px;
  --fs-small:        16px;
  --fs-eyebrow:      14px;
  --fs-caption:      12px;

  --lh-tight:        1.05;
  --lh-heading:      1.15;
  --lh-body:         1.5;
  --lh-loose:        1.65;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.12em;

  /* ---------- Spacing (8pt) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- Shadows (mostly flat, editorial) ---------- */
  --shadow-soft:  0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lift:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-float: 0 20px 60px rgba(0,0,0,0.25);
  --shadow-hero:  0 20px 60px rgba(0,0,0,0.4);
}

/* ---------- Semantic element styles ---------- */
.ds-h1 { font-family: var(--font-serif); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ds-h2 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-1); }
.ds-h3 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--fg-1); }
.ds-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-title); line-height: var(--lh-heading); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); }
.ds-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--fg-2); }
.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.ds-quote { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--fg-1); }
.ds-number { font-family: var(--font-serif); font-weight: 800; font-size: 120px; line-height: 0.9; color: var(--accent-ink); }