/* ========================================
   QUICK COLOR REFERENCE - Bootstrap 3
   Define your theme colors using CSS Custom Properties
   ======================================== */

/*
   INSTRUCTIONS:
   1. Edit the CSS variables in :root below
   2. Save this file
   3. The bootstrap-theme-override.css will automatically use your colors
   4. Clear browser cache and refresh
*/

/* ============== YOUR COLOR PALETTE ============== */
/* Edit these CSS Custom Properties (CSS Variables) to change your theme */

:root {
    /* Primary Color (Blues, Brand Color) */
    --bs3-primary-base: #254173; /* Main brand color */

    --bs3-primary-hover: #154997; /* ~15% darker */
    --bs3-primary-active: #143565; /* ~25% darker */
    --bs3-primary-light: #e8f0f4; /* Very light for backgrounds */
    --bs3-primary-light-hover: #a4b4bc; /* Very light for backgrounds */
    /* Success Color (Greens, Positive Actions) */
    --bs3-success-base: #268d33;
    --bs3-success-hover: #1f7329;
    --bs3-success-active: #185920;
    /* Info Color (Teals/Aquas, Information) */
    --bs3-info-base: #1b7e97;
    --bs3-info-hover: #166579;
    --bs3-info-active: #114c5b;
    /* Warning Color (Yellows/Oranges, Caution) */
    --bs3-warning-base: #f39c12;
    --bs3-warning-hover: #e08e0b;
    --bs3-warning-active: #c87f0a;
    /* Danger Color (Reds, Errors/Delete) */
    --bs3-danger-base: #d87641;
    --bs3-danger-hover: #cf6129;
    --bs3-danger-active: #b65424;
    /* Neutral Colors */
    --bs3-text-primary: #054261; /* Body text color (links) */
    --bs3-text-muted: #777777; /* Secondary text */
    --bs3-border-color: #ddd; /* Default borders */
    --bs3-bg-light: #f8f9fa; /* Light backgrounds */
    --bs3-bg-dark: #1E2224; /* Light backgrounds */
    --bs3-bg-dark-subtle: #2e3757; /* Main brand color */

    --bs3-primary-base-linear-color1: #2e3757;
    --bs3-primary-base-linear-color2: #106bd1;
    --border-radius: 5px;
}



/* ============== QUICK COLOR CHANGE EXAMPLES ============== */

/* Just change the values in :root above! For example:

   EXAMPLE 1: Corporate Blue Theme
   --bs3-primary-base: #0052CC;
   --bs3-success-base: #36B37E;
   --bs3-info-base: #00B8D9;
   --bs3-warning-base: #FFAB00;
   --bs3-danger-base: #FF5630;

   EXAMPLE 2: Modern Purple Theme
   --bs3-primary-base: #6554C0;
   --bs3-success-base: #00875A;
   --bs3-info-base: #0065FF;
   --bs3-warning-base: #FF991F;
   --bs3-danger-base: #DE350B;

   EXAMPLE 3: Financial/Banking Theme
   --bs3-primary-base: #003D82;
   --bs3-success-base: #007E33;
   --bs3-info-base: #0077C8;
   --bs3-warning-base: #FF6200;
   --bs3-danger-base: #C8102E;

   EXAMPLE 4: Healthcare Theme
   --bs3-primary-base: #005EB8;
   --bs3-success-base: #009639;
   --bs3-info-base: #41B6E6;
   --bs3-warning-base: #FAE100;
   --bs3-danger-base: #DA291C;
*/



/* ============== COLOR GENERATOR TOOLS ============== */

/*
   Online Tools for Generating Colors:
   
   1. Darken Colors (for hover/active states):
      - https://pinetools.com/darken-color
      - Input your base color
      - Darken by 10-15% for hover
      - Darken by 20-25% for active
   
   2. Color Palette Generators:
      - https://coolors.co/
      - https://paletton.com/
      - https://colorhunt.co/
      - https://mycolor.space/
   
   3. Accessibility Checker:
      - https://webaim.org/resources/contrastchecker/
      - Ensure text has 4.5:1 contrast ratio
      
   4. CSS Variable to Hex Converter:
      - Use browser DevTools to see computed values
      - Or use: https://www.cssportal.com/css-variables/
*/



/* ============== COMMON CUSTOMIZATION PATTERNS ============== */

/* These patterns show how CSS variables work in bootstrap-theme-override.css */

/* Pattern 1: Using CSS Variables with Fallback */
.example-button {
    background-color: #054261; /* Fallback for older browsers */
    background-color: var(--bs3-primary-base, #054261);
    border-color: var(--bs3-primary-hover, #043550);
}

/* Pattern 2: Override in custom.css */
:root {
    /* Override specific colors without editing this file */
/*    --bs3-primary-base: #0066cc;*/
}

/* Pattern 3: Create Custom Component Colors */
:root {
/*    --my-custom-color: #ff00ff;*/
}
.my-custom-component {
/*    background-color: var(--my-custom-color);*/
}



/* ============== TESTING TEMPLATE ============== */

/*
   Create a test HTML file to preview your colors:
   
   <!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
       <link rel="stylesheet" href="Content/css/color-palette-template.css">
       <link rel="stylesheet" href="Content/css/bootstrap-theme-override.css">
   </head>
   <body style="padding: 20px;">
       <h2>Button Colors</h2>
       <button class="btn btn-primary">Primary</button>
       <button class="btn btn-success">Success</button>
       <button class="btn btn-info">Info</button>
       <button class="btn btn-warning">Warning</button>
       <button class="btn btn-danger">Danger</button>
       
       <h2>Alerts</h2>
       <div class="alert alert-success">Success Alert</div>
       <div class="alert alert-info">Info Alert</div>
       <div class="alert alert-warning">Warning Alert</div>
       <div class="alert alert-danger">Danger Alert</div>
       
       <h2>Links</h2>
       <p><a href="#">Default Link (uses --bs3-primary-base)</a></p>
       <p><a href="#" class="text-primary">Primary Link</a></p>
       
       <h2>CSS Variables Inspector</h2>
       <div style="background: var(--bs3-primary-base); color: white; padding: 10px;">
           Primary Color Box
       </div>
   </body>
   </html>
*/