/*
 * Design tokens — palette, type, spacing, radius, shadow.
 *
 * Palette extracted from the HubSpot site on 2026-05-01 so the WP theme
 * matches what visitors see today (#0a77ba primary, NOT the Time Tracker's
 * #2E75B6). Convergence onto a unified palette is a separate future
 * project (see auto-memory time-tracker-brand-blue-convergence).
 *
 * Typography: Inter for body, Poppins for selective headings/buttons —
 * matching what the existing HubSpot CSS uses.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
	/* Brand */
	--ns-primary:        #0a77ba;
	--ns-primary-hover:  #085d94;
	--ns-accent-light:   #60a5fa;

	/* Text */
	--ns-text:           #191a1a;
	--ns-text-secondary: #4b5563;
	--ns-text-muted:     #6b7280;

	/* Surfaces / lines */
	--ns-bg:             #ffffff;
	--ns-bg-subtle:      #f9fafb;
	--ns-bg-section:     #f3f4f6;
	--ns-border:         #d1d5db;
	--ns-divider:        #e5e7eb;

	/* Accent (kept minimal — palette stays disciplined) */
	--ns-star:           #fbbc04;

	/* Type scale (clamped for fluid sizing without media queries on every step) */
	--ns-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ns-font-heading:   'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--ns-fs-body:        clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
	--ns-fs-small:       0.875rem;
	--ns-fs-h1:          clamp(2rem, 1.6rem + 1.6vw, 3rem);
	--ns-fs-h2:          clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem);
	--ns-fs-h3:          clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
	--ns-fs-hero-sub:    clamp(1rem, 0.95rem + 0.3vw, 1.25rem);

	/* Spacing scale (rem-based, multiples of 0.25) */
	--ns-space-1:        0.25rem;
	--ns-space-2:        0.5rem;
	--ns-space-3:        0.75rem;
	--ns-space-4:        1rem;
	--ns-space-6:        1.5rem;
	--ns-space-8:        2rem;
	--ns-space-12:       3rem;
	--ns-space-16:       4rem;
	--ns-space-20:       5rem;

	/* Radius + shadow */
	--ns-radius-sm:      4px;
	--ns-radius:         8px;
	--ns-radius-lg:      12px;
	--ns-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.08);
	--ns-shadow:         0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.08);

	/* Container width — maxes out around tablet portrait so long lines stay readable */
	--ns-container:      72rem;
	--ns-container-narrow: 48rem;
}