/* file: flowtitude.css */

@layer base {
    :root {
        --ft-text-value: clamp(1rem, 0.9411rem + 0.2299cqi, 1.125rem);
		--ft-text-scale: 1.15;
		--ft-text-factor: 1;

        --ft-space-value: clamp(1.125rem, 0.9483rem + 0.6897cqi, 1.5rem);
		--ft-space-scale: 1.33;
		--ft-space-factor: 1;

        --ft-container: var(--container-7xl);
        --ft-padding-content-x: 1rem;
        --ft-padding-content-y: 4rem;

        --ft-content-space: min(var(--ft-container), 90%);
        --ft-wide-space: calc(var(--spacing) * 30);
        --ft-mobile-columns: 6;
        --ft-tablet-columns: 9;
        --ft-desktop-columns: 12;

        --ft-color-text: var(--color-zinc-700);

        --ft-card-xs: 12rem;
        --ft-card-sm: 14rem;
        --ft-card-md: 18rem;
        --ft-card-lg: 24rem;
        --ft-card-xl: 36rem;
    }
}

@theme {
    --font-body: 'Arial';
    --font-display: 'Poppins';

    --color-primary-50: oklch(93.78% 0.029 9.72);
    --color-primary-100: oklch(88.57% 0.055 8.42);
    --color-primary-200: oklch(77.89% 0.113 11.76);
    --color-primary-300: oklch(68.62% 0.175 14.86);
    --color-primary-400: oklch(61.82% 0.221 20.08);
    --color-primary-500: oklch(54.78% 0.214 23.56);
    --color-primary-600: oklch(46.89% 0.182 23.37);
    --color-primary-700: oklch(38.22% 0.146 22.79);
    --color-primary-800: oklch(29.05% 0.108 20.93);
    --color-primary-900: oklch(18.96% 0.064 16.92);
    --color-primary-950: oklch(12.88% 0.038 12.6);
    
    --color-secondary-50: oklch(96.05% 0.005 258.32);
    --color-secondary-100: oklch(91.98% 0.01 252.82);
    --color-secondary-200: oklch(84.75% 0.017 250.86);
    --color-secondary-300: oklch(76.62% 0.027 248.18);
    --color-secondary-400: oklch(68.86% 0.036 251.11);
    --color-secondary-500: oklch(60.44% 0.047 250.74);
    --color-secondary-600: oklch(51.65% 0.042 251.08);
    --color-secondary-700: oklch(42.04% 0.034 248.63);
    --color-secondary-800: oklch(32.44% 0.024 251.01);
    --color-secondary-900: oklch(21.1% 0.014 253.14);
    --color-secondary-950: oklch(15.66% 0.007 237.09);

    --leading-none: 1em;
    --leading-tight: 1.2em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em; 

    --spacing: 0.25rem;

    --spacing-content-2xs: calc(var(--spacing-content-xs) / var(--ft-space-scale));
    --spacing-content-xs:  calc(var(--spacing-content-sm) / var(--ft-space-scale));
    --spacing-content-sm:  calc(var(--spacing-content-md) / var(--ft-space-scale));
    --spacing-content-md:  calc(var(--ft-space-value) * var(--ft-space-factor));
    --spacing-content-lg:  calc(var(--spacing-content-md) * var(--ft-space-scale));
    --spacing-content-xl:  calc(var(--spacing-content-lg) * var(--ft-space-scale));
    --spacing-content-2xl: calc(var(--spacing-content-xl) * var(--ft-space-scale));
    --spacing-content: var(--spacing-content-xs);

    --spacing-block-sm:   calc(var(--spacing-block) / 1.618);
    --spacing-block:      calc(var(--ft-space-value) * 0.666);
    --spacing-block-lg:   calc(var(--spacing-block)  * 1.618);

    --spacing-columns-sm: calc(var(--spacing-columns) / 1.618);
    --spacing-columns:    calc(var(--ft-space-value) * 1);
    --spacing-columns-lg: calc(var(--spacing-columns) * 1.618);

    --spacing-section-sm: calc(var(--spacing-section) / 1.618);
    --spacing-section:    calc(var(--ft-space-value) * 2.666);
    --spacing-section-lg: calc(var(--spacing-section) * 1.618);


    --text-xs:  calc(var(--text-sm) / var(--ft-text-scale));
    --text-sm:  calc(var(--text-base) / var(--ft-text-scale));
    --text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
    --text-lg:  calc(var(--text-base) * var(--ft-text-scale));
    --text-xl:  calc(var(--text-lg) * var(--ft-text-scale));
    --text-2xl: calc(var(--text-xl) * var(--ft-text-scale));
    --text-3xl: calc(var(--text-2xl) * var(--ft-text-scale));
    --text-4xl: calc(var(--text-3xl) * var(--ft-text-scale));
    --text-5xl: calc(var(--text-4xl) * var(--ft-text-scale));
    --text-6xl: calc(var(--text-5xl) * var(--ft-text-scale));
    --text-7xl: calc(var(--text-6xl) * var(--ft-text-scale));
    --text-8xl: calc(var(--text-7xl) * var(--ft-text-scale));
    --text-9xl: calc(var(--text-8xl) * var(--ft-text-scale));
    --text-10xl: calc(var(--text-9xl) * var(--ft-text-scale));
    
    --radius-button:  0.5rem;
    --radius-card:    0.5rem;
    --radius-section: 1rem;

    --aspect-rrss: 1.91 / 1;
    --aspect-wide: 18 / 9;
    --aspect-ultrawide: 18 / 5; 
    --aspect-golden: 1.6180 / 1;
    --aspect-portrait: 3 / 4; 
    --aspect-landscape: 4 / 3;   
}