/**
 * Lubinik Plugin - CSS Variables
 * 
 * This file contains all CSS variables used throughout the plugin's frontend.
 * These variables ensure consistent styling and easy customization.
 * 
 * IMPORTANT: These variables are aligned with the Lubinik theme variables.
 * The theme variables take precedence over plugin variables.
 */

:root {

/* -----------------------------------------------------------------------------------------
    /* GLOBAL Variables
    /* ----------------------------------------------------------------------------------------- */

    /* colors variables */
    --lubinik-primary-color: #ffffff;
    --lubinik-primary-color-rgb: 255, 255, 255;
    --lubinik-secondary-color: #222020;
    --lubinik-secondary-color-rgb: 34, 32, 32;
    --lubinik-tertiary-color: #e63946;
    --lubinik-tertiary-color-rgb: 230, 57, 70;
    --lubinik-quaternary-color: #777777;
    --lubinik-quaternary-color-rgb: 119, 119, 119;
    --lubinik-quinary-color: #e6e6e3;
    --lubinik-quinary-color-rgb: 230, 230, 227;
    --lubinik-sextary-color: #cf6c10;
    --lubinik-sextary-color-rgb: 207, 108, 16;



    --lubinik-background-card-primary: #ffffff;
    --lubinik-background-card-secondary: #f5f5f5;
    --lubinik-background-card-tertiary: #ffffff;

     /* Font Families */
    --lubinik-font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --lubinik-font-family-secondary: Arial, sans-serif;


    /* Shadow Variables */
    --lubinik-shadow-color-null: rgba(0, 0, 0, 0);
    --lubinik-shadow-color-subtle: rgba(0, 0, 0, 0.05);
    --lubinik-shadow-color-light: rgba(0, 0, 0, 0.1);
    --lubinik-shadow-color-medium: rgba(0, 0, 0, 0.15); 
    --lubinik-shadow-color-dark: rgba(0, 0, 0, 0.2);
    --lubinik-shadow-color-darker: rgba(0, 0, 0, 0.3);
    --lubinik-shadow-color-darkest-04: rgba(0, 0, 0, 0.4);
    --lubinik-shadow-color-darkest-05: rgba(0, 0, 0, 0.5);
    --lubinik-shadow-color-darkest-06: rgba(0, 0, 0, 0.6);
    --lubinik-shadow-color-darkest-07: rgba(0, 0, 0, 0.7);
    --lubinik-shadow-color-darkest-08: rgba(0, 0, 0, 0.8);
    --lubinik-shadow-color-darkest-09: rgba(0, 0, 0, 0.9);
    --lubinik-shadow-color-darkest-10: rgba(0, 0, 0, 1);


     /* Spacing Variables */
     --lubinik-spacing-xxxs: 1px;
     --lubinik-spacing-xxs: 2px;
     --lubinik-spacing-xs: 0.2rem; /* 3px */
     --lubinik-spacing-tiny: 0.3125rem; /* 5px */
     --lubinik-spacing-hxs: 0.5rem; /* 8px */
     --lubinik-spacing-sm: 1rem; /* 16px */
     --lubinik-spacing-ml: 1.25rem;   /* 20px */
     --lubinik-spacing-m: 1.5rem;   /* 24px */
     --lubinik-spacing-l: 1.875rem;  /* 30px */
     --lubinik-spacing-md: 2rem; /* 32px */
     --lubinik-spacing-ll: 2.5rem;   /* 40px */
     --lubinik-spacing-lg: 3rem; /* 48px */
     --lubinik-spacing-xl: 5rem; /* 80px */
     --lubinik-spacing-huge: 6.25rem;  /* 100px */
     --lubinik-spacing-xxl: 7rem; /* 112px */
     --lubinik-spacing-massive: 7.5rem; /* 120px */
     
     
     
     /* Font Sizes */
     --lubinik-font-size-xs: 0.85rem;
     --lubinik-font-size-sm: 0.95rem;
     --lubinik-font-size-m: 1.0rem;
     --lubinik-font-size-base: 1.2rem;
     --lubinik-font-size-md: 1.4rem;
     --lubinik-font-size-lg: 1.6rem;
     --lubinik-font-size-xl: 2rem;
     --lubinik-font-size-xxl: 3rem;
     --lubinik-font-size-xxxl: 5rem;
 
     /* Font Weights */
     --lubinik-font-weight-normal: 400;
     --lubinik-font-weight-medium: 500;
     --lubinik-font-weight-semibold: 600;
     --lubinik-font-weight-bold: 700;
 
     /* Border Radius */
     --lubinik-border-radius-sm: 4px;
     --lubinik-border-radius-md: 8px;
     --lubinik-border-radius-base: 10px;
     --lubinik-border-radius-lg: 16px;

    
    /* Plugin-Specific Variables */
    --lubinik-transition-speed: 0.3s;
    --lubinik-container-width-s: 60%;
    --lubinik-container-width-sm: 800px;
    --lubinik-container-width-m: 70%;
    --lubinik-container-width-md: 1000px;
    --lubinik-container-width-l: 80%;
    --lubinik-container-width-lm: 95%;
    --lubinik-container-width-lg: 100%;
    --lubinik-z-index-base: 1;
    --lubinik-z-index-above: 10;
    --lubinik-z-index-modal: 100;





   
}