/* ==========================================================================
   tokens.css — design tokens + light/dark mode
   The ONLY place colors are defined. Everything else references var(--ada-*).
   ========================================================================== */

/* ---- Light theme (default) ---------------------------------------------- */
:root {
	/* Base color */
	--ada-bg:            #ffffff;
	--ada-surface:       #f6f7f9;
	--ada-surface-2:     #eef0f4;
	--ada-fg:            #141519;
	--ada-muted:         #5b6472;
	--ada-border:        #e4e7ec;
	--ada-primary:       #00e377; /* brand green (CTA) */
	--ada-primary-hover: #05cf6d;
	--ada-primary-fg:    #ffffff;

	/* Announcement banner (from Figma) */
	--ada-announce-from: #16a9ff;
	--ada-announce-to:   #4fdf82;
	--ada-announce-text: #00200c;

	/* Navbar / pills (from Figma) */
	--ada-pill-bg:       #ffffff;
	--ada-pill-shadow:   0 4px 75px rgba( 11, 20, 38, 0.15 );
	--ada-nav-ink:       #0b1426; /* nav + contact labels */
	--ada-logo-ink:      #273c33; /* "Ad" in wordmark */
	--ada-logo-ink-2:    #9aa6a0; /* "Acorn" in wordmark */
	--ada-brand-green:   #4fdf82; /* acorn mark */

	/* Hero */
	--ada-badge-bg:      #f7f7f7;
	--ada-hero-title:    #171717;
	--ada-hero-accent:   #05b96e; /* "Simplified for sellers." */

	/* Stats / cards */
	--ada-card-bg:       #f7f7f7;
	--ada-ink-muted:     #a4a4a4;
	--ada-link:          #1a7544; /* "Explore the full demo" */

	/* How it works */
	--ada-divider:       #ebebeb;
	--ada-step-active:   #16a34a; /* the "01" number + ring */

	/* Panels (comparison sub-cards / icon tiles) */
	--ada-panel:         #ffffff;
	--ada-panel-shadow:  0 20px 20px -10px rgba( 23, 23, 23, 0.04 ), 0 6px 6px -3px rgba( 23, 23, 23, 0.04 ), 0 0 0 1px rgba( 23, 23, 23, 0.04 );

	/* Footer */
	--ada-footer-ink:       #5c5c5c;
	--ada-footer-watermark: rgba( 164, 164, 164, 0.10 );
	--ada-social-ink:    #0b1426;
	--ada-social-active: #eff3f6;
	--ada-cta:           #00e377;
	--ada-cta-hover:     #05cf6d;
	--ada-cta-ink:       #ffffff;
	--ada-cta-border:    rgba( 14, 15, 17, 0.12 );

	/* Spacing scale */
	--ada-space-1: 0.25rem;
	--ada-space-2: 0.5rem;
	--ada-space-3: 1rem;
	--ada-space-4: 1.5rem;
	--ada-space-5: 2.5rem;
	--ada-space-6: 4rem;

	/* Layout */
	--ada-container: 1440px;
	--ada-radius:    10px;

	/* Type */
	--ada-font:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Headings / display use the Inter variable face; body copy uses Inter. */
	--ada-font-display: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ada-logo-font: "Montserrat", var(--ada-font);
	--ada-nav-font:  "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- Dark theme --------------------------------------------------------- */
/* Navbar dark values are provisional — replace when the Figma dark navbar
   spec is provided. */
:root[data-theme="dark"] {
	--ada-bg:            #0e1116;
	--ada-surface:       #161b22;
	--ada-surface-2:     #1e242d;
	--ada-fg:            #e6e9ef;
	--ada-muted:         #9aa4b2;
	--ada-border:        #2a2f3a;
	--ada-primary:       #00e377;
	--ada-primary-hover: #2bef92;
	--ada-primary-fg:    #ffffff;

	--ada-announce-from: #16a9ff;
	--ada-announce-to:   #4fdf82;
	--ada-announce-text: #00200c;

	--ada-pill-bg:       #161b22;
	--ada-pill-shadow:   0 4px 60px rgba( 0, 0, 0, 0.55 );
	--ada-nav-ink:       #e6e9ef;
	--ada-logo-ink:      #e6e9ef;
	--ada-logo-ink-2:    #9aa4b2;
	--ada-brand-green:   #4fdf82;
	--ada-footer-ink:       #9aa4b2;
	--ada-footer-watermark: rgba( 255, 255, 255, 0.05 );
	--ada-badge-bg:      #1e242d;
	--ada-hero-title:    #e6e9ef;
	--ada-hero-accent:   #2bef92;
	--ada-card-bg:       #161b22;
	--ada-ink-muted:     #9aa4b2;
	--ada-link:          #3ddc84;
	--ada-divider:       #2a2f3a;
	--ada-step-active:   #3ddc84;
	--ada-panel:         #161b22;
	--ada-panel-shadow:  0 10px 20px -10px rgba( 0, 0, 0, 0.5 ), 0 0 0 1px rgba( 255, 255, 255, 0.06 );
	--ada-social-ink:    #c9d1d9;
	--ada-social-active: rgba( 255, 255, 255, 0.10 );
	--ada-cta:           #00e377;
	--ada-cta-hover:     #2bef92;
	--ada-cta-ink:       #ffffff;
	--ada-cta-border:    rgba( 255, 255, 255, 0.14 );
}

/* ---- No-JS fallback ----------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--ada-bg:            #0e1116;
		--ada-surface:       #161b22;
		--ada-surface-2:     #1e242d;
		--ada-fg:            #e6e9ef;
		--ada-muted:         #9aa4b2;
		--ada-border:        #2a2f3a;
		--ada-pill-bg:       #161b22;
		--ada-pill-shadow:   0 4px 60px rgba( 0, 0, 0, 0.55 );
		--ada-nav-ink:       #e6e9ef;
		--ada-logo-ink:      #e6e9ef;
		--ada-social-ink:    #c9d1d9;
		--ada-social-active: rgba( 255, 255, 255, 0.10 );
		--ada-cta-ink:       #04160c;
		--ada-cta-border:    rgba( 255, 255, 255, 0.14 );
	}
}