:root {

    /*////////////////////////////////////////////////////
    // PRIMITIVES ////////////////////////////////////////
    ////////////////////////////////////////////////////*/
    
    /* Textos base*/
    --text-xs: clamp(1.1rem, 1.06rem + 0.13vw, 1.2rem);  /* 11px a 12px */
    --text-s: clamp(1.3rem, 1.26rem + 0.13vw, 1.4rem);   /* 13px a 14px (Max 1.4) */
    --text-m: clamp(1.5rem, 1.46rem + 0.13vw, 1.6rem);   /* 15px a 16px (Max 1.6) */
    --text-l: clamp(1.7rem, 1.66rem + 0.13vw, 1.8rem);   /* 17px a 18px (Max 1.8) */
    
    /* Títulos de impacto*/
    --text-xl: clamp(2rem, 1.68rem + 1vw, 2.8rem);       /* 20px a 28px */
    --text-2xl: clamp(2.4rem, 1.76rem + 2vw, 4rem);      /* 24px a 40px */
    --text-3xl: clamp(3rem, 2.12rem + 2.75vw, 5.2rem);   /* 30px a 52px */
    
    --space-3xs: clamp(0.4rem, 0.32rem + 0.25vw, 0.6rem); /* 4px a 6px */
    --space-2xs: clamp(0.8rem, 0.64rem + 0.5vw, 1.2rem);  /* 8px a 12px */
    --space-xs: clamp(1.2rem, 1.04rem + 0.5vw, 1.6rem);   /* 12px a 16px */
    --space-s: clamp(1.6rem, 1.28rem + 1vw, 2.4rem);      /* 16px a 24px */
    --space-m: clamp(2.4rem, 2.08rem + 1vw, 3.2rem);      /* 24px a 32px */
    --space-l: clamp(3.2rem, 2.56rem + 2vw, 4.8rem);      /* 32px a 48px */
    --space-xl: clamp(4.8rem, 4.16rem + 2vw, 6.4rem);     /* 48px a 64px */
    --space-2xl: clamp(6.4rem, 5.12rem + 4vw, 9.6rem);    /* 64px a 96px */
    --space-3xl: clamp(9.6rem, 8.32rem + 4vw, 12.8rem);   /* 96px a 128px */
    
    --border-width-m: 1px;
    --border-radius-m: 0.8rem;
    --border-radius-xl: 3rem;

    --c-neutral-darkest: hsl(00 00 05);
    --c-neutral-darker: ;
    --c-neutral-dark: ;
    --c-neutral-semi-dark: hsl(00 00 30);
    --c-neutral-medium: ;
    --c-neutral-semi-light: ;
    --c-neutral-light: ;
    --c-neutral-lighter: ;
    --c-neutral-lightest: hsl(0 0 100);

    --c-base-darker: hsl(220 20 10);
    --c-base-dark: hsl(220 20 15);
    --c-base-light: hsl(220 20 80);
    --c-base-lighter: hsl(220 20 95);

    --c-accent-darker: hsl(220 100 30);
    --c-accent-dark: hsl(220 100 40);
    --c-accent-semi-dark: hsl(220 100 45);
    --c-accent-medium: hsl(220 100 55);
    --c-accent-light: hsl(220 100 65);

    /*////////////////////////////////////////////////////
    // THEME /////////////////////////////////////////////
    ////////////////////////////////////////////////////*/

    /* LIGHT */
    --c-text-main: var(--c-base-darker);
    --c-text-muted: color-mix(in srgb, var(--c-text-main) 60%, transparent);
    --c-text-weak: color-mix(in srgb, var(--c-text-main) 40%, transparent);
    --c-text-accent: var(--c-accent-medium);
    --c-bg-base-01: var(--c-neutral-lightest);
    --c-bg-base-02: var(--c-base-lighter);
    --c-bg-accent: var(--c-accent-medium);
    --c-sf-base-01: var(--c-base-lighter);
    --c-sf-base-02: var(--c-neutral-lightest);
    --c-sf-accent: color-mix(in srgb, var(--c-accent-medium) 15%, transparent);
    --c-action-01: var(--c-accent-medium);
    --c-action-01-grad: var(--c-accent-dark);
    --c-action-01-hover: var(--c-accent-dark);
    --c-action-01-hover-grad: var(--c-accent-darker);
    --c-action-01-active: var(--c-accent-medium);
    --c-action-01-reverse: var(--c-neutral-lightest);
    --c-action-02: ;
    --c-action-02-hover: ;
    --c-action-02-active: ;
    --c-border-main:  color-mix(in srgb, var(--c-text-main) 15%, transparent);
    --c-border-accent:  color-mix(in srgb, var(--c-text-accent) 80%, transparent);
    --c-input: var(--c-base-lighter);
    
}

[data-theme="dark"] {
    
    /* DARK */
    --c-text-main: var(--c-neutral-lightest);
    --c-text-muted: color-mix(in srgb, var(--c-text-main) 60%, transparent);
    --c-text-weak: color-mix(in srgb, var(--c-text-main) 40%, transparent);;
    --c-text-accent: var(--c-accent-medium);
    --c-bg-base-01: var(--c-base-dark);
    --c-bg-base-02: var(--c-base-darker);
    --c-sf-base-01: var(--c-base-darker);
    --c-sf-base-02: color-mix(in srgb, var(--c-base-dark) 80%, transparent);
    /*--c-action-01: var(--c-accent-medium);
    --c-action-01-hover: ;
    --c-action-01-active: ;
    --c-action-01-reverse: ;
    --c-action-02: ;
    --c-action-02-hover: ;
    --c-action-02-active: ;*/
    --c-border-main: color-mix(in srgb, var(--c-text-main) 15%, transparent);
    --c-border-accent:  color-mix(in srgb, var(--c-text-accent) 80%, transparent);
    --c-input: ;
    
}

:root {

    /*////////////////////////////////////////////////////
    // CONTEXTUAL ////////////////////////////////////////
    ////////////////////////////////////////////////////*/
    
    --section-pad-y: var(--space-2xl);
    --section-pad-x: var(--space-m);
    --section-gap: var(--space-2xl);
    
    --container-width: 1120px;
    --container-row-gap: var(--space-l);
    --container-column-gap: var(--space-xl);
    --container-border-width: var(--border-width-m);
    --container-border-radius: var(--border-radius-xl);

    --content-gap: var(--space-2xs);
    --header-gap: var(--space-2xs);
  
    --card-grid-gap: var(--space-xs);
    --card-pad: var(--space-s);
    --card-gap: var(--space-xs);
    --card-border-width: var(--border-width-m);
    --card-border-radius: var(--border-radius-m);
    --card-content-gap: var(--space-2xs);

    --button-pad-y: var(--space-2xs);
    --button-pad-x: var(--space-m);
    --button-gap: var(--space-2xs);
    --button-border-width: var(--border-width-m);
    --button-border-radius: var(--border-radius-xl);

    --input-border-radius: var(--border-radius-m);

    --navbar-pad-y: var(--space-xs);

    --font-heading: "Archive Black", sans-serif;
    --font-text: "Manrope", sans-serif;
    
}