/* ============================================================
   PREVENTIFY — Colors & Typography Design Tokens
   GrowZar Suite | Shopify 1-Click Checkout & Fulfilment
   ============================================================ */

/* ── Google Fonts Import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ── Base Color Palette ──────────────────────────────────── */

  /* Teal / Brand Green */
  --color-teal-50:   #e6faf6;
  --color-teal-100:  #b3f0e3;
  --color-teal-200:  #80e6d0;
  --color-teal-300:  #4ddbbd;
  --color-teal-400:  #1ad1aa;
  --color-teal-500:  #00c49a;   /* primary teal */
  --color-teal-600:  #00a882;
  --color-teal-700:  #008c6a;
  --color-teal-800:  #007055;
  --color-teal-900:  #005440;

  /* Blue / CTA */
  --color-blue-50:   #eff6ff;
  --color-blue-100:  #dbeafe;
  --color-blue-200:  #bfdbfe;
  --color-blue-300:  #93c5fd;
  --color-blue-400:  #60a5fa;
  --color-blue-500:  #3b82f6;   /* primary CTA blue */
  --color-blue-600:  #2563eb;
  --color-blue-700:  #1d4ed8;
  --color-blue-800:  #1e40af;
  --color-blue-900:  #1e3a8a;

  /* Dark Teal / Backgrounds */
  --color-dark-50:   #1a3a3a;
  --color-dark-100:  #163232;
  --color-dark-200:  #122b2b;
  --color-dark-300:  #0f2525;
  --color-dark-400:  #0c1f1f;
  --color-dark-500:  #091a1a;   /* deepest bg */
  --color-dark-bg:   #0d2626;   /* primary page bg */
  --color-dark-card: #112e2e;   /* card/surface bg */
  --color-dark-nav:  #0a2020;   /* nav/sidebar */

  /* Neutrals */
  --color-white:     #ffffff;
  --color-gray-50:   #f8fafc;
  --color-gray-100:  #f1f5f9;
  --color-gray-200:  #e2e8f0;
  --color-gray-300:  #cbd5e1;
  --color-gray-400:  #94a3b8;
  --color-gray-500:  #64748b;
  --color-gray-600:  #475569;
  --color-gray-700:  #334155;
  --color-gray-800:  #1e293b;
  --color-gray-900:  #0f172a;

  /* Status */
  --color-success:   #00c49a;
  --color-warning:   #f59e0b;
  --color-error:     #ef4444;
  --color-info:      #3b82f6;

  /* ── Semantic Color Vars ─────────────────────────────────── */
  --bg-page:         var(--color-dark-bg);
  --bg-surface:      var(--color-dark-card);
  --bg-nav:          var(--color-dark-nav);
  --bg-overlay:      rgba(13, 38, 38, 0.85);

  --fg-primary:      var(--color-white);
  --fg-secondary:    rgba(255,255,255,0.70);
  --fg-muted:        rgba(255,255,255,0.45);
  --fg-accent:       var(--color-teal-500);
  --fg-cta:          var(--color-blue-500);

  --border-subtle:   rgba(255,255,255,0.08);
  --border-default:  rgba(255,255,255,0.14);
  --border-accent:   rgba(0, 196, 154, 0.40);

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.50);
  --shadow-card:     0 2px 12px rgba(0,0,0,0.35);
  --shadow-glow-teal: 0 0 24px rgba(0, 196, 154, 0.25);

  /* ── Typography Families ─────────────────────────────────── */
  --font-display:    'Plus Jakarta Sans', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:         0.75rem;    /* 12px */
  --text-sm:         0.875rem;   /* 14px */
  --text-base:       1rem;       /* 16px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        1.875rem;   /* 30px */
  --text-4xl:        2.25rem;    /* 36px */
  --text-5xl:        3rem;       /* 48px */
  --text-6xl:        3.75rem;    /* 60px */
  --text-7xl:        4.5rem;     /* 72px */

  /* ── Font Weights ────────────────────────────────────────── */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  /* ── Line Heights ────────────────────────────────────────── */
  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.5;
  --lh-relaxed:      1.65;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --ls-tight:        -0.03em;
  --ls-normal:        0em;
  --ls-wide:          0.04em;
  --ls-wider:         0.08em;
  --ls-widest:        0.14em;

  /* ── Spacing Scale ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  220ms;
  --duration-slow:  350ms;
}

/* ── Semantic Type Styles ────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: rgba(0,196,154,0.10);
  color: var(--color-teal-400);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--fg-primary);
}

/* ── Accent text color utilities ─────────────────────────── */
.text-teal  { color: var(--color-teal-500); }
.text-blue  { color: var(--color-blue-500); }
.text-muted { color: var(--fg-muted); }
.text-white { color: var(--fg-primary); }