/*
 * CustomGPT website design tokens.
 *
 * Imported from customgpt-marketing-website-standards-main/design-system/customgpt-tokens.css.
 * This file is the child-theme bridge to the canonical website standards.
 * Keep it limited to variables so existing legacy pages are not globally redesigned.
 */

:root {
	/* Brand colors */
	--color-primary: #7367f0;
	--color-primary-hover: #5a52d4;
	--color-purple: #7c3aed;
	--color-accent: #a78bfa;
	--color-pink: #ee55ff;
	--color-pink-hover: #d93eea;
	--color-star: #fbbf24;
	--color-award: #b45309;
	--color-award-bg: #fef3c7;
	--color-award-border: rgba(251, 191, 36, 0.3);

	/* Warning and billing callouts */
	--color-warning: #f97316;
	--color-warning-dark: #ea580c;
	--color-warning-bg: #fff7ed;
	--color-warning-border: #fb923c;

	/* Surfaces */
	--color-bg: #faf9f6;
	--color-bg-neutral: #ede9e0;
	--color-bg-soft: #ede9e0;
	--color-bg-dark: #0a0a1a;

	/* Text */
	--color-text: #111827;
	--color-text-muted: #4b5563;
	--color-text-light: #9ca3af;

	/* Dark surfaces */
	--color-on-dark: #ffffff;
	--color-on-dark-muted: rgba(255, 255, 255, 0.75);
	--color-on-dark-accent: #a78bfa;

	/* Borders */
	--color-border: #b8b2a8;
	--color-border-soft: #ede9fe;

	/* Ghost buttons */
	--btn-ghost-border: #b8b2a8;
	--btn-ghost-text: #111827;
	--btn-ghost-border-hover: #111827;
	--btn-ghost-bg-hover: #ede9e0;
	--btn-height: 54px;
	--btn-mobile-width: min(80%, 360px);

	/* Typography */
	--font: "Inter", system-ui, sans-serif;
	--font-serif: "Lora", Georgia, serif;
	--text-xs: 11px;
	--text-sm: 12px;
	--text-ui: 13px;
	--text-base: 14px;
	--text-md: 15px;
	--text-body: 16px;
	--text-lg: 18px;
	--text-xl: 20px;

	/* Spacing */
	--sp1: 4px;
	--sp2: 8px;
	--sp3: 12px;
	--sp4: 16px;
	--sp5: 24px;
	--sp6: 32px;
	--sp7: 48px;

	/* Layout */
	--max-w: 1200px;
	--w-hero: 900px;
	--w-prose: 760px;
	--w-tight: 560px;
	--section-y: 88px;
	--section-y-sm: 64px;
	--section-y-lg: 120px;

	/* Motion */
	--trans-fast: 0.15s ease;
	--trans-base: 0.2s ease;
	--trans-slow: 0.3s ease;

	/* Z-index */
	--z-base: 1;
	--z-raised: 10;
	--z-dropdown: 50;
	--z-nav: 100;
	--z-modal: 200;
	--z-toast: 300;
}