/**
 * Theme CSS
 * Contains the colors and utilities used by the site template
 */

@theme {
    /* ==================== FONTS ==================== */
    --font-body: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ==================== FONT SIZES ==================== */
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.125rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25rem;
    --text-md: 1rem;
    --text-md--line-height: 1.5rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.75rem;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.875rem;
    --text-display-xs: 1.5rem;
    --text-display-xs--line-height: 2rem;
    --text-display-sm: 1.875rem;
    --text-display-sm--line-height: 2.375rem;
    --text-display-md: 2.25rem;
    --text-display-md--line-height: 2.75rem;
    --text-display-md--letter-spacing: -0.72px;
    --text-display-lg: 3rem;
    --text-display-lg--line-height: 3.75rem;
    --text-display-lg--letter-spacing: -0.96px;
    --text-display-xl: 3.75rem;
    --text-display-xl--line-height: 4.5rem;
    --text-display-xl--letter-spacing: -1.2px;
    --text-display-2xl: 4.5rem;
    --text-display-2xl--line-height: 5.625rem;
    --text-display-2xl--letter-spacing: -1.44px;

    /* ==================== LAYOUT ==================== */
    --max-width-container: 1280px;
    --breakpoint-xxs: 320px;
    --breakpoint-xs: 600px;

    /* ==================== RADIUS ==================== */
    --radius-none: 0px;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-DEFAULT: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* ==================== SHADOWS ==================== */
    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
    --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
    --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
    --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
    --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);

    /* ==================== ANIMATIONS ==================== */
    --animate-marquee: marquee 60s linear infinite;

    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    /* ==================== BASE COLORS ==================== */
    --color-transparent: transparent;
    --color-white: rgb(255 255 255);
    --color-black: rgb(0 0 0);

    /* Gray scale - the main palette we actually use */
    --color-gray-25: rgb(253 253 253);
    --color-gray-50: rgb(250 250 250);
    --color-gray-100: rgb(245 245 245);
    --color-gray-200: rgb(233 234 235);
    --color-gray-300: rgb(213 215 218);
    --color-gray-400: rgb(164 167 174);
    --color-gray-500: rgb(113 118 128);
    --color-gray-600: rgb(83 88 98);
    --color-gray-700: rgb(65 70 81);
    --color-gray-800: rgb(37 43 55);
    --color-gray-900: rgb(24 29 39);
    --color-gray-950: rgb(10 13 18);

    /* Blue - used for links, social icons */
    --color-blue-50: rgb(239 248 255);
    --color-blue-400: rgb(83 177 253);
    --color-blue-500: rgb(46 144 250);
    --color-blue-600: rgb(21 112 239);
    --color-blue-700: rgb(23 92 211);
    --color-blue-800: rgb(24 73 169);

    /* Pink - used for Instagram icon */
    --color-pink-500: rgb(238 70 188);
    --color-pink-600: rgb(221 37 144);

    /* Brand (green) - minimal set for accent */
    --color-brand-500: rgb(66 214 116);
    --color-brand-600: rgb(52 190 100);
    --color-brand-700: rgb(38 166 84);

    /* Error (red) - for form validation */
    --color-error-500: rgb(240 68 56);
    --color-error-600: rgb(217 45 32);

    /* Warning (yellow/orange) - for ratings, alerts */
    --color-warning-400: rgb(253 176 34);
    --color-warning-500: rgb(247 144 9);
    --color-warning-600: rgb(220 104 3);

    /* Success (green) - for success states */
    --color-success-500: rgb(23 178 106);
    --color-success-600: rgb(7 148 85);

    /* ==================== SEMANTIC COLORS (Light Mode) ==================== */

    /* Text colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-tertiary: var(--color-gray-600);
    --color-text-quaternary: var(--color-gray-500);
    --color-text-disabled: var(--color-gray-500);
    --color-text-placeholder: var(--color-gray-500);
    --color-text-white: var(--color-white);
    --color-text-error-primary: var(--color-error-600);
    --color-text-brand-secondary: var(--color-brand-700);

    /* Foreground colors (icons, UI elements) */
    --color-fg-primary: var(--color-gray-900);
    --color-fg-secondary: var(--color-gray-700);
    --color-fg-tertiary: var(--color-gray-600);
    --color-fg-quaternary: var(--color-gray-400);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-white: var(--color-white);
    --color-fg-brand-primary: var(--color-brand-600);
    --color-fg-brand-secondary: var(--color-brand-500);
    --color-fg-error-primary: var(--color-error-600);

    /* Background colors */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-quaternary: var(--color-gray-200);
    --color-bg-disabled: var(--color-gray-100);
    --color-bg-primary_hover: var(--color-gray-50);
    --color-bg-secondary_hover: var(--color-gray-100);
    --color-bg-brand-solid: var(--color-brand-600);
    --color-bg-brand-solid_hover: var(--color-brand-700);
    --color-bg-error-primary: rgb(254 243 242);

    /* Border colors */
    --color-border-primary: var(--color-gray-300);
    --color-border-secondary: var(--color-gray-200);
    --color-border-tertiary: var(--color-gray-100);
    --color-border-disabled: var(--color-gray-300);
    --color-border-brand: var(--color-brand-500);
    --color-border-error: var(--color-error-500);

    /* Focus ring */
    --color-focus-ring: var(--color-brand-500);

    /* ==================== TAILWIND PROPERTY MAPPINGS ==================== */

    /* Background property colors */
    --background-color-primary: var(--color-bg-primary);
    --background-color-secondary: var(--color-bg-secondary);
    --background-color-tertiary: var(--color-bg-tertiary);
    --background-color-quaternary: var(--color-bg-quaternary);
    --background-color-disabled: var(--color-bg-disabled);
    --background-color-primary_hover: var(--color-bg-primary_hover);
    --background-color-secondary_hover: var(--color-bg-secondary_hover);
    --background-color-brand-solid: var(--color-bg-brand-solid);
    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
    --background-color-error-primary: var(--color-bg-error-primary);

    /* Text property colors */
    --text-color-primary: var(--color-text-primary);
    --text-color-secondary: var(--color-text-secondary);
    --text-color-tertiary: var(--color-text-tertiary);
    --text-color-quaternary: var(--color-text-quaternary);
    --text-color-disabled: var(--color-text-disabled);
    --text-color-placeholder: var(--color-text-placeholder);
    --text-color-brand-secondary: var(--color-text-brand-secondary);
    --text-color-error-primary: var(--color-text-error-primary);

    /* Border property colors */
    --border-color-primary: var(--color-border-primary);
    --border-color-secondary: var(--color-border-secondary);
    --border-color-tertiary: var(--color-border-tertiary);
    --border-color-disabled: var(--color-border-disabled);
    --border-color-brand: var(--color-border-brand);
    --border-color-error: var(--color-border-error);

    /* Ring property colors */
    --ring-color-primary: var(--color-border-primary);
    --ring-color-secondary: var(--color-border-secondary);
    --ring-color-brand: var(--color-border-brand);
    --ring-color-error: var(--color-border-error);
}

/* ==================== SECTION STYLES ==================== */

/* Apply consistent styling to sections in main content */
:not([data-design-gallery]) > section,
:not([data-design-gallery]) section {
    @apply bg-primary py-16 md:py-24;
}

/* Design gallery previews: no padding or background */
[data-design-gallery] section {
    @apply bg-transparent p-0;
}

/* Sample site sections: restore padding */
[data-sample-site] section {
    @apply bg-primary py-16 md:py-24;
}
