/*
 * CAEPS Design Tokens
 * ───────────────────
 * The foundation layer. Every component, screen, and pattern in the
 * plugin draws from these values. To re-theme, change tokens here;
 * everything downstream updates.
 *
 * Aesthetic: warm + community-driven + polished admin. Sage green
 * primary signals growth/care; warm terracotta accent adds humanity;
 * neutrals are slightly warm rather than cold gray. Generous spacing.
 * Soft, warm-tinted shadows. Friendly humanist typography.
 */

:root {
	/* ── Color · Surfaces ─────────────────────────────────────────── */
	--caeps-color-bg:              #f6f7f9; /* cool off-white page bg */
	--caeps-color-surface:         #ffffff;
	--caeps-color-surface-raised:  #ffffff;
	--caeps-color-surface-sunken:  #f1f5f9;

	/* ── Color · Borders ──────────────────────────────────────────── */
	--caeps-color-border:          #e3e6ea;
	--caeps-color-border-subtle:   #eef0f3;
	--caeps-color-border-strong:   #cbd5e1;
	--caeps-color-border-focus:    #2271b1;

	/* ── Color · Text ─────────────────────────────────────────────── */
	--caeps-color-text:            #1f2937;
	--caeps-color-text-secondary:  #64748b;
	--caeps-color-text-tertiary:   #94a3b8;
	--caeps-color-text-inverse:    #ffffff;
	--caeps-color-text-on-primary: #ffffff;
	--caeps-color-text-link:       #2271b1;
	--caeps-color-text-link-hover: #185a91;

	/* ── Color · Brand (primary = polished WP blue) ──────────────── */
	--caeps-color-primary:         #2271b1;
	--caeps-color-primary-hover:   #185a91;
	--caeps-color-primary-active:  #134a78;
	--caeps-color-primary-soft:    #eff6ff;
	--caeps-color-primary-soft-2:  #d6e6f5;

	--caeps-color-accent:          #0ea5e9;
	--caeps-color-accent-hover:    #0284c7;
	--caeps-color-accent-soft:     #e0f2fe;

	/* ── Color · Semantic status ──────────────────────────────────── */
	--caeps-color-success:         #16a34a;
	--caeps-color-success-soft:    #dcfce7;
	--caeps-color-success-border:  #bbf7d0;

	--caeps-color-warning:         #ca8a04;
	--caeps-color-warning-soft:    #fef9c3;
	--caeps-color-warning-border:  #fde68a;

	--caeps-color-danger:          #dc2626;
	--caeps-color-danger-soft:     #fee2e2;
	--caeps-color-danger-border:   #fecaca;

	--caeps-color-info:            #0284c7;
	--caeps-color-info-soft:       #e0f2fe;
	--caeps-color-info-border:     #bae6fd;

	/* ── Typography ───────────────────────────────────────────────── */
	--caeps-font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--caeps-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Size scale (in px equivalents; declared in rem for accessibility) */
	--caeps-font-size-2xs:  0.6875rem; /* 11px */
	--caeps-font-size-xs:   0.75rem;   /* 12px */
	--caeps-font-size-sm:   0.8125rem; /* 13px */
	--caeps-font-size-md:   0.875rem;  /* 14px — body default */
	--caeps-font-size-lg:   1rem;      /* 16px */
	--caeps-font-size-xl:   1.125rem;  /* 18px */
	--caeps-font-size-2xl:  1.375rem;  /* 22px — h3 */
	--caeps-font-size-3xl:  1.75rem;   /* 28px — h2 */
	--caeps-font-size-4xl:  2.25rem;   /* 36px — h1 / hero */

	/* Weights */
	--caeps-font-weight-regular:  400;
	--caeps-font-weight-medium:   500;
	--caeps-font-weight-semibold: 600;
	--caeps-font-weight-bold:     700;

	/* Line heights */
	--caeps-line-height-tight:  1.2;
	--caeps-line-height-snug:   1.35;
	--caeps-line-height-normal: 1.55;
	--caeps-line-height-loose:  1.75;

	/* Letter spacing */
	--caeps-tracking-tight:   -0.012em;
	--caeps-tracking-normal:  0;
	--caeps-tracking-wide:    0.04em;
	--caeps-tracking-wider:   0.06em;

	/* ── Spacing scale (8px base, with finer increments for tight UI) ─ */
	--caeps-space-0:  0;
	--caeps-space-1:  0.25rem;  /* 4px */
	--caeps-space-2:  0.5rem;   /* 8px */
	--caeps-space-3:  0.75rem;  /* 12px */
	--caeps-space-4:  1rem;     /* 16px */
	--caeps-space-5:  1.25rem;  /* 20px */
	--caeps-space-6:  1.5rem;   /* 24px */
	--caeps-space-8:  2rem;     /* 32px */
	--caeps-space-10: 2.5rem;   /* 40px */
	--caeps-space-12: 3rem;     /* 48px */
	--caeps-space-16: 4rem;     /* 64px */

	/* ── Radii ────────────────────────────────────────────────────── */
	--caeps-radius-sm:    4px;
	--caeps-radius-md:    6px;
	--caeps-radius-lg:    10px;
	--caeps-radius-xl:    14px;
	--caeps-radius-pill:  999px;

	/* ── Shadows (neutral, modern SaaS) ───────────────────────────── */
	--caeps-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--caeps-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--caeps-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.05);
	--caeps-shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05);
	--caeps-shadow-xl: 0 20px 32px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06);

	/* Inner shadow for sunken surfaces */
	--caeps-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);

	/* Focus ring */
	--caeps-shadow-focus: 0 0 0 3px rgba(34, 113, 177, 0.20);

	/* ── Motion ───────────────────────────────────────────────────── */
	--caeps-duration-instant: 100ms;
	--caeps-duration-fast:    150ms;
	--caeps-duration-base:    250ms;
	--caeps-duration-slow:    400ms;

	--caeps-ease-in:      cubic-bezier(0.4, 0, 1, 1);
	--caeps-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
	--caeps-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Z-index scale ────────────────────────────────────────────── */
	--caeps-z-base:     1;
	--caeps-z-raised:   10;
	--caeps-z-dropdown: 100;
	--caeps-z-overlay:  500;
	--caeps-z-modal:    1000;
	--caeps-z-toast:    9000;
}

/*
 * Reduced-motion respect — disable transitions for users with the
 * `prefers-reduced-motion` accessibility preference set.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--caeps-duration-instant: 0ms;
		--caeps-duration-fast:    0ms;
		--caeps-duration-base:    0ms;
		--caeps-duration-slow:    0ms;
	}
}