/* ==========================
   CSS Design Token - Vokati
   ========================== */

/* Color Tokens */
:root {
    /* Base Colors */
    --color-primary: #00264B;
    --color-primary-hover: #001F3D;
    --color-secondary: #13CB99;
    --color-secondary-hover: #10A87F;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #7C7C7C;
    --color-warning: #FDFAE1;
    --color-brown: #7B6D05;

    /* Blue Scale */
    --color-blue-100: #00264B;
    --color-blue-90: #0E4274;
    --color-blue-80: #27629D;
    --color-blue-70: #4988C5;
    --color-blue-60: #76B3EE;
    --color-blue-50: #95CBFF;
    --color-blue-40: #ACD6FF;
    --color-blue-30: #C4E2FF;
    --color-blue-20: #DBEDFF;
    --color-blue-10: #F2F8FF;

    /* Green Scale */
    --color-green-100: #00513B;
    --color-green-90: #007958;
    --color-green-80: #02A277;
    --color-green-70: #13CB99;
    --color-green-60: #2BF4BD;
    --color-green-50: #52FFD0;
    --color-green-40: #78FFDA;
    --color-green-30: #9EFFE4;
    --color-green-20: #C4FFEF;
    --color-green-10: #EAFFF9;

    /* Grey Scale */
    --color-grey-100: #373D41;
    --color-grey-90: #4C5257;
    --color-grey-80: #62696E;
    --color-grey-70: #787F85;
    --color-grey-60: #8F969B;
    --color-grey-50: #A7ADB2;
    --color-grey-40: #C0C5C9;
    --color-grey-30: #DADDDF;
    --color-grey-20: #F4F5F6;
    --color-grey-10: #F6F6F6;

    /* Gradient */
    --color-fill-gradient: linear-gradient(90deg, #00264B 0%, #0D957F 69.5%, #13CB99 100%);

    /* Danger */
    --color-red: #F00;

    /* Text Colors */
    --text-black: #000000;
    --text-black-body: #62696E;
    --text-white: #FFF;
    --text-white-body: #F6F6F6;
    --text-green: #13CB99;
    --text-gradient: linear-gradient(90deg, #00264B 0%, #0D957F 69.5%, #13CB99 100%);
    --text-red: #FF0000;

    /* Background Colors */
    --bg-white: #ffffff;
    --bg-blue: #00264B;
    --bg-green: #13CB99;
    --bg-dark-grey: #23272A;
    --bg-light-grey: #F4F5F6;

    --color-base-black: #313131;
    --neutral-grey-3: #EEE;
    --neutral-grey-1: #999999;
}

/* Spacing Tokens */
:root {
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 0.75rem;  /* 12px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 3rem;    /* 48px */
}

/* Typography Tokens */
:root {
    --font-family-primary: 'Poppins', sans-serif;
    --font-family-secondary: 'Roboto', sans-serif;

    --font-size-xxs: 0.625rem;  /* 10px */
    --font-size-xs: 0.75rem;  /* 40px */
    --font-size-sm: 0.875rem; /* 48px */
    --font-size-md: 1rem;     /* 56px */
    --font-size-lg: 4rem;  /* 64px */
    --font-size-xl: 4.5rem;   /* 72px */
    --font-size-xxl: 5rem;    /* 80px */
    --font-size-xxxl: 5.5rem;   /* 88px */

    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-h4: 1.5rem;
    --fs-h5: 1.375rem;

    --fs-body-xl: 1.375rem;
    --fs-body-lg: 1.125rem;
    --fs-body-md: 1rem;
    --fs-body-sm: 0.875rem;
    --fs-body-xs: 0.75rem;
    --fs-body-xxs: 0.625rem;

    /* Font Weights */
    --font-weight-100: 100; /* Thin */
    --font-weight-200: 200; /* Extra Light */
    --font-weight-300: 300; /* Light */
    --font-weight-400: 400; /* Regular */
    --font-weight-500: 500; /* Medium */
    --font-weight-600: 600; /* Semi Bold */
    --font-weight-700: 700; /* Bold */
    --font-weight-800: 800; /* Extra Bold */
    --font-weight-900: 900; /* Black */

    --line-height-md: 100%;
    --line-height-lg: 110%;
    --line-height-xl: 150%;
}

/* Border Radius Tokens */
:root {
    --radius-xs: 0.25rem; /* 4px */
    --radius-sm: 0.5rem;  /* 8px */
    --radius-md: 1rem;    /* 16px */
    --radius-lg: 1.5rem;  /* 24px */
    --radius-full: 50rem; /* Fully rounded */
}

/* Breakpoints (Mobile-First) */
:root {
    --bp-mobile: 576px;
    --bp-tablet: 768px;
    --bp-desktop: 992px;
    --bp-large: 1200px;
    --bp-xl: 1400px;
}

/* Shadow Tokens */
:root {
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Z-Index Tokens */
:root {
    --z-index-low: 10;
    --z-index-medium: 50;
    --z-index-high: 100;
    --z-index-modal: 1050;
    --z-index-tooltip: 1100;
}

:root {
    /* Padding Tokens */
    --padding-xxs: 0.25rem; /* 4px */
    --padding-xs: 0.5rem;   /* 8px */
    --padding-sm: 0.75rem;  /* 12px */
    --padding-md: 1rem;     /* 16px */
    --padding-lg: 1.5rem;   /* 24px */
    --padding-xl: 2rem;     /* 32px */
    --padding-xxl: 3rem;    /* 48px */
    --padding-xxxl: 4rem;    /* 64px */
    --padding-xxxxl: 5rem;    /* 80px */

    --padding-10-px: 0.625rem;
    --padding-40-px: 2.5rem;

    /* Margin Tokens */
    --margin-xxs: 0.25rem; /* 4px */
    --margin-xs: 0.5rem;   /* 8px */
    --margin-sm: 0.75rem;  /* 12px */
    --margin-md: 1rem;     /* 16px */
    --margin-lg: 1.5rem;   /* 24px */
    --margin-xl: 2rem;     /* 32px */
    --margin-xxl: 3rem;    /* 48px */
    --margin-xxxl: 4rem;    /* 64px */
    --margin-xxxxl: 5rem;    /* 80px */

    --margin-10-px: 0.625rem;
    --margin-40-px: 2.5rem;

    --gap-1-2: 0.5rem;   /* 8px */
    --gap-3-4: 0.75rem;  /* 12px */
    --gap-10: 0.625rem;  /* 10px */
    --gap-16: 1rem;      /* 16px */
    --gap-24: 1.5rem;    /* 24px */
    --gap-28: 1.75rem;   /* 28px */
    --gap-32: 2rem;      /* 32px */
    --gap-35: 2.188rem;  /* 35px */
    --gap-40: 2.5rem;    /* 40px */
    --gap-42: 2.625rem;    /* 42px */
    --gap-48: 3rem;      /* 48px */

    --gap-x-24: 1.5rem;  /* Column gap */
    --gap-y-24: 1.5rem;  /* Row gap */
    --gap-x-48: 3rem;    /* Column gap */
    --gap-y-48: 3rem;    /* Row gap */
}