/* TenantCall — Design tokens as CSS custom properties.
 * Source: design_handoff_marketing_site/README.md "Design Tokens" section.
 * --color-primary: Deep Navy, confirmed by stakeholder (open decision #1 in
 * docs/planning/README.md is resolved).
 */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f6f7f6;
  --color-text:          #243240;
  --color-heading:       #1b2a38;
  --color-text-muted:    #4a5a66;
  --color-text-muted2:   #5b6b76;
  --color-text-faint:    #8a97a0;
  --color-border:        #e7ebe8;
  --color-accent:        #6c8f79;
  --color-accent-soft:   #eaf1ec;
  --color-accent-soft2:  #dce7df;
  --color-primary:       #1f2e3d; /* Deep Navy */
  --color-on-primary:    #ffffff;
  --color-badge-text:    #5b6e63; /* hero pill badge text */
  --color-chip-text:     #4b6b57; /* "2 months free" chip text */
  --color-cta-subcopy:   #c3cbd1; /* final CTA band subcopy on primary bg */
  --color-error:         #c0392b; /* inline form error text — not in the design handoff */
  --overlay-modal:       rgba(27, 42, 56, 0.45);
  --overlay-nav:         rgba(255, 255, 255, 0.92);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, sans-serif;

  --font-size-h1: clamp(38px, 6vw, 68px);
  --font-weight-h1: 700;
  --line-height-h1: 1.06;
  --letter-spacing-h1: -0.02em;

  --font-size-h2: clamp(28px, 4vw, 42px);
  --font-weight-h2: 700;
  --line-height-h2: 1.2;
  --letter-spacing-h2: -0.01em;

  --font-size-eyebrow: 14px;
  --font-weight-eyebrow: 700;
  --letter-spacing-eyebrow: 0.06em;

  --font-size-body-min: 15px;
  --font-size-body-max: 17.5px;
  --line-height-body-min: 1.55;
  --line-height-body-max: 1.65;

  --font-size-button-min: 14.5px;
  --font-size-button-max: 16px;
  --font-weight-button-min: 600;
  --font-weight-button-max: 700;

  /* ── Spacing / shape ────────────────────────────────────── */
  --container-max-width: 1160px;
  --container-padding-x: 28px;

  --section-padding-y: clamp(60px, 8vw, 120px);
  --section-padding-y-top-hero: clamp(60px, 9vw, 120px);

  --radius-card-sm: 16px;
  --radius-card-lg: 20px;
  --radius-button: 10px;
  --radius-button-lg: 12px;
  --radius-pill: 100px;

  --border-card: 1px solid var(--color-border);
  --border-card-highlight: 2px solid var(--color-primary);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-device: 0 14px 32px rgba(27, 42, 56, 0.10);
  --shadow-pricing-highlight: 0 20px 45px rgba(27, 42, 56, 0.12);
  --shadow-button-hero: 0 8px 20px rgba(31, 46, 61, 0.18);
  --shadow-modal: 0 30px 70px rgba(0, 0, 0, 0.25);

  /* ── Decorative ─────────────────────────────────────────── */
  --gradient-hero-decoration: radial-gradient(circle, rgba(108, 143, 121, 0.10), rgba(108, 143, 121, 0) 70%);
}