/**
 * CNC ACF Duplicator - Design System Variables
 * 
 * Central place for all design tokens
 * Change these values to customize the entire plugin!
 */

/* ========================================
   CUSTOM FONTS - Poppins
   ======================================== */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ========================================
       BRAND COLORS - User Specified
       ======================================== */
    --cnc-acf-primary-color: #6167F8;
    /* Primary brand blue */
    --cnc-acf-primary-light: #AECFFF;
    /* Light brand blue */
    --cnc-acf-primary-accent: #9966FF;
    /* Purple accent */
    --cnc-acf-primary-gradient: linear-gradient(135deg, #AECFFF 0%, #6167F8 100%);

    /* ========================================
       TEXT COLORS
       ======================================== */
    --cnc-acf-text-black: #000000;
    /* Black text */
    --cnc-acf-text-white: #FFFFFF;
    /* White text */

    --cnc-acf-text-dark: #111827;
    --cnc-acf-text-gray-dark: #374151;
    --cnc-acf-text-gray-medium: #4b5563;
    --cnc-acf-text-gray: #6b7280;
    --cnc-acf-text-light-gray: #9ca3af;

    /* ========================================
       STATUS COLORS
       ======================================== */
    --cnc-acf-success-color: #22bb67;
    /* Success green */
    --cnc-acf-warning-color: #ed4d4d;
    /* Warning red */
    --cnc-acf-danger-color: #ed4d4d;
    /* Danger red (same as warning) */
    --cnc-acf-info-color: #6167F8;
    /* Info - using primary brand color */

    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --cnc-acf-white: #FFFFFF;
    --cnc-acf-black: #000000;
    --cnc-acf-overlay-bg: rgba(0, 0, 0, 0.6);
    --cnc-acf-bg-gray-light: #f9fafb;
    --cnc-acf-bg-gray-lighter: #f3f4f6;
    --cnc-acf-bg-purple-light: #faf5ff;
    --cnc-acf-bg-purple-lighter: #f5f3ff;
    --cnc-acf-btn-gradient: linear-gradient(135deg, #6167F8 0%, #8b5cf6 100%);

    /* ========================================
       BORDER COLORS
       ======================================== */
    --cnc-acf-border-gray: #e5e7eb;
    --cnc-acf-border-purple-light: #c4b5fd;

    /* ========================================
       TYPOGRAPHY - Poppins Font
       ======================================== */
    --cnc-acf-line-height-tight: 1.25;
    --cnc-acf-line-height-normal: 1.5;
    --cnc-acf-line-height-relaxed: 1.75;

    /* ========================================
       SPACING - Consistent Rhythm
       ======================================== */
    --cnc-acf-spacing-xs: 8px;
    --cnc-acf-spacing-sm: 12px;
    --cnc-acf-spacing-md: 16px;
    --cnc-acf-spacing-lg: 24px;
    --cnc-acf-spacing-xl: 32px;
    --cnc-acf-spacing-2xl: 40px;

    /* ========================================
       BORDER RADIUS - Sharp & Rectangular
       ======================================== */
    --cnc-acf-radius-none: 0;
    --cnc-acf-radius-sm: 2px;
    /* Very subtle corners */
    --cnc-acf-radius-md: 3px;
    /* Slightly rounded */
    --cnc-acf-radius-lg: 4px;
    /* Minimal rounding */
    --cnc-acf-radius-xl: 6px;
    /* Modal corners */
    --cnc-acf-radius-full: 9999px;
    /* Only for close button */


    /* ========================================
       BORDERS
       ======================================== */
    --cnc-acf-border-width: 1px;
    --cnc-acf-border-width-thick: 2px;
    --cnc-acf-border-color: var(--cnc-acf-border-gray);
    --cnc-acf-border-color-hover: #D1D5DB;

    /* ========================================
       SHADOWS - Subtle Depth
       ======================================== */
    --cnc-acf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cnc-acf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --cnc-acf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --cnc-acf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --cnc-acf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --cnc-acf-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ========================================
       TRANSITIONS - Smooth Interactions
       ======================================== */
    --cnc-acf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cnc-acf-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --cnc-acf-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       Z-INDEX
       ======================================== */
    --cnc-acf-z-dropdown: 1000;
    --cnc-acf-z-sticky: 1020;
    --cnc-acf-z-fixed: 1030;
    --cnc-acf-z-modal-backdrop: 1040;
    --cnc-acf-z-modal: 1050;
    --cnc-acf-z-popover: 1060;
    --cnc-acf-z-tooltip: 1070;

    /* ========================================
       BUTTON SPECIFIC
       ======================================== */
    --cnc-acf-btn-padding-y: 10px;
    --cnc-acf-btn-padding-x: 24px;
    --cnc-acf-btn-padding-sm-y: 8px;
    --cnc-acf-btn-padding-sm-x: 16px;
    --cnc-acf-btn-padding-lg-y: 12px;
    --cnc-acf-btn-padding-lg-x: 32px;

    /* ========================================
       POPUP/MODAL SPECIFIC
       ======================================== */
    --cnc-acf-popup-max-width: 600px;
    --cnc-acf-popup-max-height: 80vh;
    --cnc-acf-modal-max-width: 480px;
}