/**
 * Client-Specific Theming & Customizations
 *
 * This file contains CSS variables for easy color/theme customization
 * and any client-specific CSS overrides.
 *
 * USAGE:
 * 1. Update the CSS variables below to match your client's brand colors
 * 2. Add any additional client-specific CSS at the bottom of this file
 * 3. Do not modify bootstrap.css, platforma.css, or clue.css directly
 */


/* ========================================================================
   CSS VARIABLES - CUSTOMIZE THESE FOR EACH CLIENT
   ======================================================================== */

:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --primary-color: #285d97;              /* Main brand color - Hinsdale Dental Journey navy */
  --primary-color-dark: #26578E;         /* Darker shade for hover states */
  --primary-color-light: #04A2DB;        /* Lighter shade for accents */
  --primary-color-bright: #04A2DB;       /* Brighter shade for button hover states */

  /* Override Bootstrap's primary color to match your brand */
  --bs-primary: #285d97;
  --bs-primary-rgb: 40, 93, 151;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #6c757d;            /* Secondary gray color */
  --accent-color: #04A2DB;               /* Accent bright blue */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --button-color: var(--primary-color);
  --button-hover-color: var(--primary-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: #fafafa;
  --bg-light: #f8f9fa;
  --hero-bg-color: #e7ecf9;              /* Homepage hero section background */
  --sidebar-bg: rgba(38, 87, 142, 0.95); /* Mobile sidebar menu background */


  /* ===== TEXT COLORS ===== */
  --text-primary: #212529;               /* Main body text */
  --text-secondary: #6c757d;             /* Secondary/muted text */
  --text-light: #6c757d;                 /* Light gray text */
  --text-white: #ffffff;                 /* White text */


  /* ===== TYPOGRAPHY ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-headings: var(--font-family-base);
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* Heading font weights */
  --heading-font-weight: 300;            /* Light weight for h1-h4 */


  /* ===== SPACING ===== */
  --section-padding: 4rem;               /* Vertical padding for major sections */
  --section-padding-mobile: 2rem;        /* Vertical padding on mobile */


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;            /* For rounded buttons */


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* ========================================================================
   DARK MODE SUPPORT (OPTIONAL)
   Uncomment this section if you want to support dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }
}
*/


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   Add any additional custom CSS below this line
   ======================================================================== */

/* Example: Override specific element styling
.custom-header {
  background-color: var(--primary-color);
  color: var(--text-white);
}
*/

/* Example: Client-specific font import
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
  --font-family-base: 'Roboto', sans-serif;
}
*/

/* Example: Custom button style
.btn-custom {
  background-color: var(--accent-color);
  color: white;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 2rem;
}
*/


/* ========================================================================
   USAGE EXAMPLES & NOTES
   ======================================================================== */

/*
HOW TO USE CSS VARIABLES:

1. In your HTML or other CSS:
   background-color: var(--primary-color);
   color: var(--text-primary);

2. To change colors for a specific client:
   - Simply update the hex values in the :root section above
   - All instances throughout the site will update automatically

3. Common customizations by client:
   - --primary-color: Your client's main brand color
   - --sidebar-bg: Match the sidebar to their branding
   - --hero-bg-color: Customize homepage hero section
   - --font-family-base: Use client's preferred font

4. Advanced: Override Bootstrap classes:
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

BEST PRACTICES:
- Always use variables instead of hardcoded colors
- Test changes across multiple pages before deploying
- Keep client-specific overrides in this file
- Document any custom CSS you add below
*/