@use "color-palette";
@use "props";
@use "templates"; // Base Styles and Templates
@use "../utils/vars";

:where(:root, html) {

    // MEASUREMENTS

    --sl: calc(var(--base) / 10);
    --3xs: calc(var(--base) / 8);
    --xxs: calc(var(--base) / 6);  //  0.5 Extra Extra Small
    --xs: calc(var(--base) / 4);   //  1.0 Extra Small
    --sm: calc(var(--base) / 2);   //  2.0 Small
    --md: var(--base);  //  4.0 Medium AKA default
    --lg: calc(var(--base) * 2);  //  6.0 Large
    --xl: calc(var(--base) * 4);  //  8.0 Extra Large
    --xxl: calc(var(--base) * 6);
    --3xl: calc(var(--base) * 8); //  10.0 Huge
    --hg: calc(var(--base) * 10);

    // Color created with the palette

    --light-destructive: color-mix(in oklab, var(--destructive), #FFF 30%);

    // Blend Colors -----------------------------------------

    --blend-text-color: #000; // Color that blend with texts
    --blend-back-color: #FFF; // Color that blend with bg colors
    --blend-highlight-color: #FFF; // Color the enhance visibility

    // Content / Text

    --content-text: color-mix(in oklab, var(--text), var(--blend-text-color) 20%);

    --footer-text: color-mix(in oklab, var(--text), var(var(--blend-back-color) 75%));

    // Color Mix Methods ---------------------------------------------------

    // Rectangular Space

    --color-method-in-oklab: in oklab;
    --color-method-srgb: in srgb;

    // Polar Space

    --color-method-oklch: in oklch;
    --color-method-hsl: in hsl;

    // Foregrounds & Muted colors ------------------------------

    --color-mix-method: var(--color-method-in-oklab);

    // Muted --------------------------------------------------

    --muted-blend-intensity: 45%; // Intensity of blending

    --muted-text: color-mix(var(--color-mix-method), var(--text), var(--blend-text-color) var(--muted-blend-intensity));

    --muted-accent: color-mix(var(--color-mix-method), var(--accent), var(--background) var(--muted-blend-intensity));

    --muted-primary: color-mix(var(--color-mix-method), var(--primary), var(--background) var(--muted-blend-intensity));

    --muted-secondary: color-mix(var(--color-mix-method), var(--secondary), var(--background) var(--muted-blend-intensity));

    --muted-destructive: color-mix(var(--color-mix-method), var(--destructive), var(--background) var(--muted-blend-intensity));

    --muted-background: color-mix(var(--color-mix-method), var(--background), var(--blend-text-color) var(--muted-blend-intensity));

    // Foreground ---------------------------------------------------

    --foreground-blend-intensity: 15%; // Blend Intensity

    --foreground-text: color-mix(var(--color-mix-method), var(--text), var(--blend-highlight-color) var(--foreground-blend-intensity));

    --foreground-primary: color-mix(var(--color-mix-method), var(--primary), var(--text) var(--foreground-blend-intensity));

    --foreground-background: color-mix(var(--color-mix-method), var(--background), var(--text) var(--foreground-blend-intensity));

    --foreground-secondary: color-mix(var(--color-mix-method), var(--secondary), var(--text) var(--foreground-blend-intensity));

    --foreground-accent: color-mix(var(--color-mix-method), var(--accent), var(--text) var(--foreground-blend-intensity));

    --foreground-destructive: color-mix(var(--color-mix-method), var(--destructive), var(--text) var(--foreground-blend-intensity));

    // GRADIENTS ----------------------------------------------------

    --gradient-primary-secondary-accent: linear-gradient(90deg, rgba(23,60,115,1) 0%, rgba(8,20,38,1) 35%, rgba(41,108,209,1) 100%);

    --gradient-primary-secondary: linear-gradient(90deg, rgba(23,60,115,1) 0%, rgba(8,20,38,1) 35%);

    --gradient-secondary-accent: linear-gradient(90deg, rgba(8,20,38,1) 35%, rgba(41,108,209,1) 100%);

    --gradient-primary-accent: linear-gradient(90deg, rgba(23,60,115,1) 50%, rgba(41,108,209,1) 100%);

    // Highlight ------------------------------------------------------

    --highlight-text: color-mix(in oklab, var(--text) 60%);

    --highlight-accent: color-mix(in oklab, var(--accent) 60%);

    // BREAKPOINTS ---------------------------------

    --bp-sm: 40em;
    --bp-md: 48em;
    --bp-lg: 64em;
    --bp-hg: 80em;

    // SPACING BASE ---------------------------------

    // height

    --h-full: 100%;
    --h-half: 50%;
    --h-third: 33.3333%
    --h-quarter: 25%;

    --h-screen: 100dvh;
    --h-half-screen: 50dvh;
    --h-third-screen: 33.3333dvh;
    --h-quarter-screen: 25dvh;

    // width

    --w-full: 100%;
    --w-half: 50%;
    --w-third: 33.3333%
    --w-quarter: 25%;

    --w-screen: 100dvw;
    --w-half-screen: 50dvw;
    --w-third-screen: 33.3333dvw;
    --w-quarter-screen: 25dvw;

    // GRID -----------------------------------------

    --grid-cols: auto-fill;
    --grid-rows: auto;
    --grid-item-width: 10rem;
    --grid-justify-items: start;

    // Padding

    --padding-block: var(--sm);
    --padding-inline: var(--lg);

    // BASE VARS ---------------------------------

    --roundness: var(--sm);

    --inner-round: calc(var(--spacing) - var(--roudness));

    --round-sm: var(--sm);
    --round-md: var(--md);
    --round-lg: var(--lg);

    --round-full: 50%;
    --round-peal: 100vmax;

    // TYPOGRAPHY -------------------------------------------------

    // Types of font

    --font-serif: 'Baskerville', 'Merriweather', 'Cormorant Garamond', 'Times New Roman', Georgia, Times, serif;

    --font-mono: 'Cascadia Code', 'Roboto Mono', 'Fira Code' 'Inconsolata', 'Red Hat Mono', monospace;

    --font-sans-serif: 'Inter', system-ui, 'Roboto', Poppins, Monstserrat, 'Open Sans', Lato, Nunito, sans-serif;

    --font-special: 'Rubik Bubbles', 'Special Elite';

    --font-handwrite: Ephesis, Smooch, 'Dancing Script', Cassandra, Caveat, system-ui;
    
    --font-slab-serif: 'Roboto Slab', Arvo, 'Josefin Slab', Rokkitt, sans-serif; // It's a variant from sans-serif, but with squared serifs. I don't recommend the usage, cause it's not so customizable with variants.

    // Font Weight

    --font-weight: 400;

    // Font Size
    --font-size: var(--md);

    // Line Height
    --line-height: var(--line-height-relaxed); // Default

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2; 

    // typography default

    --font-family: var(--font-sans-serif);

    // ANIMATION ---------------------------------

    --transition: var(--transition--duration, .2s) var(--transition--timing, ease-in);

    --transition--duration: .4s;
    --transition--timing: ease;
    --transition--props: all;

    // GENERAL -----------------------------------

    // FAMILY VARS

    // ICONS --------------------------------------------------------------

    --expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

// GRADIENTS ----------------------------------------