/*
 * 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 and
 * the CustomGPT Figma design-system typography/color styles.
 * Keep it limited to variables so existing legacy pages are not globally redesigned.
 */

:root {
	/* Brand colors */
	--color-primary: #7367f0;
	--color-primary-hover: #5a52d4;
	--color-secondary: #808390;
	--color-secondary-hover: #6d707b;
	--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);

	/* Theme and Bootstrap colors */
	--color-success: #28c76f;
	--color-success-bg: #e5f8ed;
	--color-danger: #ea5455;
	--color-danger-bg: #fdecec;
	--color-warning: #ff9f43;
	--color-warning-dark: #e68f3c;
	--color-warning-bg: #fff3e8;
	--color-warning-border: #ffd9b3;
	--color-info: #00cfe8;
	--color-info-bg: #e0f9fc;

	/* Surfaces */
	--color-bg: #f8f7fa;
	--color-bg-neutral: #f3f2f5;
	--color-bg-soft: #f4f3f6;
	--color-bg-dark: #2f2b3d;

	/* Text */
	--color-text: #2f2b3d;
	--color-text-body: #6d6b77;
	--color-text-muted: #a8aaae;
	--color-text-placeholder: #b7b5be;
	--color-text-light: #c6c7d0;

	/* Dark surfaces */
	--color-on-dark: #ffffff;
	--color-on-dark-muted: rgba(255, 255, 255, 0.78);
	--color-on-dark-accent: #7367f0;

	/* Borders */
	--color-border: #dbdade;
	--color-border-soft: #edecef;

	/* Ghost buttons */
	--btn-ghost-border: #dbdade;
	--btn-ghost-text: #2f2b3d;
	--btn-ghost-border-hover: #7367f0;
	--btn-ghost-bg-hover: #f3f2f5;
	--btn-height: 54px;
	--btn-mobile-width: min(80%, 360px);

	/* Typography */
	--font: "Public Sans", "Inter", system-ui, sans-serif;
	--font-heading: "Public Sans", "Inter", system-ui, sans-serif;
	--font-serif: var(--font-heading);
	/* Figma typography roles. The dash pair is min/default font-size -> desktop font-size. */
	--display-1-size: 64px;
	--display-1-desktop-size: 64px;
	--display-1-line: 72px;
	--display-1-weight: 700;
	--display-2-size: 48px;
	--display-2-desktop-size: 48px;
	--display-2-line: 56px;
	--display-2-weight: 700;
	--h1-size: 40px;
	--h1-desktop-size: 48px;
	--h1-weight: 700;
	--h2-size: 32px;
	--h2-desktop-size: 40px;
	--h2-weight: 700;
	--h3-size: 32px;
	--h3-desktop-size: 40px;
	--h3-weight: 600;
	--h4-size: 20px;
	--h4-desktop-size: 28px;
	--h4-weight: 600;
	--h5-size: 16px;
	--h5-desktop-size: 24px;
	--h5-weight: 600;
	--h6-size: 14px;
	--h6-desktop-size: 20px;
	--h6-weight: 600;
	--subtitle-18-size: 18px;
	--subtitle-18-desktop-size: 18px;
	--subtitle-18-weight: 600;
	--subtitle-16-size: 16px;
	--subtitle-16-desktop-size: 16px;
	--subtitle-16-weight: 600;
	--body-16-size: 16px;
	--body-16-desktop-size: 24px;
	--body-16-weight: 400;
	--body-16-medium-weight: 500;
	--body-16-semibold-weight: 600;
	--body-14-size: 14px;
	--body-14-desktop-size: 20px;
	--body-14-weight: 400;
	--body-14-medium-weight: 500;
	--body-14-semibold-weight: 600;
	--label-14-size: 14px;
	--label-14-desktop-size: 20px;
	--label-14-weight: 500;
	--label-12-size: 12px;
	--label-12-desktop-size: 16px;
	--label-12-weight: 500;
	--helper-12-size: 12px;
	--helper-12-desktop-size: 16px;
	--helper-12-weight: 400;
	--caption-12-size: 12px;
	--caption-12-desktop-size: 16px;
	--caption-12-weight: 400;
	--overline-12-size: 12px;
	--overline-12-desktop-size: 16px;
	--overline-12-weight: 600;
	--button-l-size: 16px;
	--button-l-desktop-size: 24px;
	--button-l-weight: 600;
	--button-m-size: 14px;
	--button-m-desktop-size: 20px;
	--button-m-weight: 600;
	--button-s-size: 13px;
	--button-s-desktop-size: 18px;
	--button-s-weight: 600;
	--input-14-size: 14px;
	--input-14-desktop-size: 20px;
	--input-14-weight: 400;
	--input-16-size: 16px;
	--input-16-desktop-size: 24px;
	--input-16-weight: 400;
	--table-header-size: 12px;
	--table-header-desktop-size: 16px;
	--table-header-weight: 600;
	--table-cell-size: 14px;
	--table-cell-desktop-size: 20px;
	--table-cell-weight: 400;
	--table-cell-emphasis-weight: 500;
	--text-xs: 12px;
	--text-sm: 13px;
	--text-ui: 14px;
	--text-base: 14px;
	--text-md: 16px;
	--text-body: 16px;
	--text-body-desktop: 24px;
	--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;
}