/* CONFIG-THEME.CSS - LENS277
   =============================
   SINGLE SOURCE OF TRUTH for all color selector styling

   Change ONE variable here to update ALL 5 selectors:
   - Solid Tint
   - Gradient Tint
   - Polarized
   - Transitions
   - Mirrors

   HOW TO USE:
   - Want blue text? Change --selector-text-color to #0066ff
   - Want 5 columns? Change --selector-grid-columns to 5
   - Want bigger buttons? Change --selector-swatch-size to 60px

   All changes apply INSTANTLY to all selectors!
*/

:root {
    /* ===== COLOR SELECTOR GRID LAYOUT ===== */
    --selector-grid-columns: 4;           /* Number of columns (3, 4, 5, 6, 8, etc.) */
    --selector-gap: 9px;                  /* Space between color buttons */
    --selector-max-width: 380px;          /* Maximum width of selector grid */
    --selector-margin: 15px auto;         /* Top/bottom and horizontal centering */

    /* ===== COLOR BUTTON SIZING ===== */
    --selector-button-width: 65px;        /* Width of each color button */
    --selector-button-min-height: 85px;   /* Minimum height (allows text wrapping) */
    --selector-swatch-size: 48px;         /* Color swatch circle/square size */
    --selector-swatch-margin: 6px;        /* Space between swatch and text */

    /* ===== TEXT STYLING ===== */
    --selector-text-color: #ffffff;       /* Text color - WHITE for dark background! */
    --selector-font-size: 0.7rem;         /* Font size for color names */
    --selector-font-weight: 500;          /* Font weight (400=normal, 600=semibold, 700=bold) */
    --selector-line-height: 1.1;          /* Line height for text */
    --selector-text-min-height: 26px;     /* Minimum height for text area */

    /* ===== COLOR SWATCH STYLING ===== */
    --selector-swatch-border: 1px solid #ddd;         /* Border around color swatches */
    --selector-swatch-border-radius: 8px;             /* Rounded corners */
    --selector-swatch-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Shadow effect */

    /* ===== SELECTED/ACTIVE STATE ===== */
    --selector-active-transform: scale(1.1);          /* Grow when selected */
    --selector-active-border: 2px solid #d4af37;      /* Gold border when selected */
    --selector-active-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); /* Gold glow */

    /* ===== HOVER STATE ===== */
    --selector-hover-transform: translateY(-2px);     /* Lift up on hover */
    --selector-hover-border: 1px solid #ccc;          /* Darker border on hover */

    /* ===== CONTAINER BACKGROUNDS ===== */
    --selector-container-bg: transparent;             /* Container background (transparent = no white box) */
    --selector-container-padding: 8px;                /* Padding inside container */
    --selector-container-border-radius: 12px;         /* Rounded corners for container */

    /* ===== LABEL STYLING ===== */
    --selector-label-color: #ffffff;                  /* Label text color */
    --selector-label-font-size: 14px;                 /* Label font size */
    --selector-label-font-weight: 600;                /* Label font weight */
    --selector-label-margin: 0 0 12px 0;              /* Label spacing */
    --selector-label-text-align: center;              /* Label alignment */

    /* ===== SPECIFIC SELECTOR OVERRIDES ===== */
    /* These allow individual selectors to differ from defaults */

    /* Transitions - often needs white text on dark background */
    --transitions-text-color: #ffffff;
    --transitions-text-shadow: 0 1px 2px rgba(0,0,0,0.3);

    /* Polarized - 3 columns instead of 4 */
    --polarized-grid-columns: 3;
    --polarized-max-width: 400px;

    /* Gradient Presets - 8 columns for compact display */
    --gradient-presets-grid-columns: 8;
    --gradient-presets-gap: 8px;

    /* Mirror - sometimes needs different styling */
    --mirror-text-color: #000000;
    --mirror-label-uppercase: uppercase;
    --mirror-label-letter-spacing: 0.5px;
}

/* ===== DARK THEME OVERRIDES (if using dark mode) ===== */
/* Uncomment this section if you want dark mode support */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --selector-text-color: #ffffff;
        --selector-label-color: #e8e8e8;
        --selector-swatch-border: 1px solid #444;
        --selector-container-bg: rgba(255, 255, 255, 0.05);
    }
}
*/

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 768px) {
    :root {
        --selector-grid-columns: 3;              /* Fewer columns on mobile */
        --selector-button-width: 60px;           /* Smaller buttons */
        --selector-swatch-size: 45px;            /* Smaller swatches */
        --selector-font-size: 0.65rem;           /* Smaller text */
        --selector-gap: 8px;                     /* Tighter spacing */
    }
}

@media (max-width: 480px) {
    :root {
        --selector-grid-columns: 2;              /* Even fewer columns on small phones */
        --selector-button-width: 55px;
        --selector-swatch-size: 42px;
    }
}

/* ===== QUICK THEME PRESETS (Uncomment one to use) ===== */

/* PRESET 1: Compact Layout */
/*
:root {
    --selector-grid-columns: 5;
    --selector-gap: 6px;
    --selector-swatch-size: 40px;
    --selector-button-width: 55px;
}
*/

/* PRESET 2: Spacious Layout */
/*
:root {
    --selector-grid-columns: 3;
    --selector-gap: 15px;
    --selector-swatch-size: 55px;
    --selector-button-width: 75px;
}
*/

/* PRESET 3: Blue Accent Theme */
/*
:root {
    --selector-text-color: #0066ff;
    --selector-active-border: 2px solid #0066ff;
    --selector-active-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}
*/

/* PRESET 4: All White Text (for dark backgrounds) */
/*
:root {
    --selector-text-color: #ffffff;
    --transitions-text-color: #ffffff;
    --mirror-text-color: #ffffff;
}
*/