/*
===============================================================================
===============================================================================

  ESKAI DESIGN SYSTEM - ESKAI GARCÍA VERSIÓN 10.1 - (C) ESKAI GARCÍA 2024     

===============================================================================
===============================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Onest:wght@100..900&display=swap');

:root{
  /* PRIMITIVE TOKENS ==================================================== */

    /* FONT: --ex-main-font-[*] */
    --ex-main-font-sans: "Onest", Arial, Helvetica, sans-serif;
    --ex-main-font-code: "IBM Plex Mono", 'Courier New', Courier, monospace;

    --ex-main-font-light: 400;
    --ex-main-font-regular: 500;
    --ex-main-font-bold: 600;

    --ex-main-font-xl: 2rem;
    --ex-main-font-lg: 1.5rem;
    --ex-main-font-md: 1.2rem;
    --ex-main-font-sm: 1rem;

    /* COLOR: --ex-main-color-[value] */
    --ex-main-neutral-100: #FFFFFF;
    --ex-main-neutral-90: #F4F5F6;
    --ex-main-neutral-80: #E3E7E8;
    --ex-main-neutral-70: #CDD3D5;
    --ex-main-neutral-60: #AFB8BB; /* <== */
    --ex-main-neutral-50: #939C9F;
    --ex-main-neutral-40: #737F82;
    --ex-main-neutral-30: #5A6366;
    --ex-main-neutral-20: #474E50;
    --ex-main-neutral-15: #323738;
    --ex-main-neutral-10: #202324;
    --ex-main-neutral-05: #17191b;
    --ex-main-neutral-00: #111213;

    --ex-main-primary-100: #DEF6FD;
    --ex-main-primary-95: #d4f6ff;
    --ex-main-primary-90: #AEEDFF;
    --ex-main-primary-80: #87E5FF;
    --ex-main-primary-70: #40D1F9;
    --ex-main-primary-60: #0DC5F8; /* <== */
    --ex-main-primary-50: #06A8D5;
    --ex-main-primary-40: #0798C0;
    --ex-main-primary-30: #087C9C;
    --ex-main-primary-20: #045268;
    --ex-main-primary-10: #073744;
    --ex-main-primary-05: #06222a;
    --ex-main-primary-00: #061519;

    --ex-main-secondary-100: #CDFEF0;
    --ex-main-secondary-90: #99FCDF;
    --ex-main-secondary-80: #66F8CD;
    --ex-main-secondary-70: #40F3BD;
    --ex-main-secondary-60: #1DDCA3; /* <== */
    --ex-main-secondary-50: #18B385;
    --ex-main-secondary-40: #16A077;
    --ex-main-secondary-30: #127F5E;
    --ex-main-secondary-20: #0C5A42;
    --ex-main-secondary-10: #063326;
    --ex-main-secondary-00: #031C15;

    --ex-main-red-100: #FFF0ED;
    --ex-main-red-90: #FED9D3;
    --ex-main-red-80: #FEBAB0;
    --ex-main-red-70: #FD8F7E;
    --ex-main-red-60: #FD735D;
    --ex-main-red-50: #F74529; /* <== */
    --ex-main-red-40: #DF2609;
    --ex-main-red-30: #BA1F07;
    --ex-main-red-20: #931805;
    --ex-main-red-10: #5A0C01;
    --ex-main-red-00: #170401;

    --ex-main-amber-100: #FEF0C8;
    --ex-main-amber-90: #FEE8A7;
    --ex-main-amber-80: #FCDC7F;
    --ex-main-amber-70: #FACA3E;
    --ex-main-amber-60: #F8BC0D; /* <== */
    --ex-main-amber-50: #E6AD08;
    --ex-main-amber-40: #BF900A;
    --ex-main-amber-30: #93700A;
    --ex-main-amber-20: #6B520A;
    --ex-main-amber-10: #4B3A08;
    --ex-main-amber-00: #241D05;

    --ex-main-brand-gradient: linear-gradient(90deg, var(--ex-main-primary-60) 5%, var(--ex-main-secondary-60) 90%);
    --ex-main-brand-gradient-dark: linear-gradient(90deg, var(--ex-main-primary-00) 5%, var(--ex-main-secondary-00) 90%);

    /* SPACING: --ex-main-spacing-[size] */
    --ex-main-spacing-xxxl: 2.5rem;
    --ex-main-spacing-xxxl: 2rem;
    --ex-main-spacing-xxl: 1.5rem;
    --ex-main-spacing-xl: 1.25rem;
    --ex-main-spacing-lg: 1rem; /* <== */
    --ex-main-spacing-md: 0.75rem;
    --ex-main-spacing-sm: 0.675rem;
    --ex-main-spacing-xs: 0.5rem;
    --ex-main-spacing-xxs: 0.375rem;
    --ex-main-spacing-xxxs: 0.25rem;

    /* FIXED SIZES --ex-main-[item]-[size] */
    --ex-main-icon-default: 24px;
    --ex-main-icon-large: 36px;

    /* STROKE THICKNESS --ex-main-stroke-[size] */
    --ex-main-stroke-sm: 2px;
    --ex-main-stroke-md: 3px;
    
}