/* Beauty By Lex - Color Palette Variables */
/* filepath: assets/css/color-variables.css */

:root {
  /* ====== PRIMARY BRAND COLORS ====== */
  --primary: #97bade;
  --primary-bright: #2c6fb3;
  --primary-overlay: #6aa1ca;
  --primary-subtle: #C8D9E6;
  --primary-tint: #acc5dd;
  --primary-muted:rgb(167, 184, 201)2;
  --primary-dark: #2F4156;
  /* ====== SECONDARY BRAND COLORS ====== */
  --secondary: #eba9b3;
  --secondary-bright: #d86c7c;
  --secondary-subtle: #FFE1E0;
  --secondary-overlay: #FFE1E0;
  --secondary-tint: #F7C9D0;
  --secondary-muted: #dbb6bb;
  
  /* ====== TEXT COLORS ====== */
  --text-primary: #2F4156;          /* Main headings, primary text */
  --text-primary-bright: var(--primary-bright); /* Bright accent text */
  --text-secondary: #2F4156;        /* Secondary text, descriptions */
  --text-muted: #404e5f;           /* Muted text */
  --text-light: var(--bg-off-white);           /* Light text on dark backgrounds */
  --text-dark: #2F4156;            /* Alternative dark text */
  --text-white: #ffffff;           /* White text */
  --text-dark-alt: #241315;        /* Alternative dark text variant */
  --text-rose: var(--accent-rose);       /* Alternative accent-rose text variant */
  --text-fr: #2F4156;        /* Face Reality section text */
  --text-primary-bright: var(--primary-bright);
  /* ====== BACKGROUND COLORS ====== */
  --bg-white: #ffffff;             /* Pure white backgrounds */
  --bg-off-white: #F5EFEB;         /* Warm off-white sections - default page background */
  --bg-light-gray: #fef9f1;        /* Light gray backgrounds */
  --bg-alt: #fef9f1;        /* Light gray backgrounds */
  --bg-subtle: #F5EFEB;           /* Subtle background tint */
  --bg-fr-grey: #c0c9cf;        /* Face Reality section background */
  --bg-light-gray-subtle: #c6c6c6;        /* very Light gray backgrounds */
  
  /* ====== BORDER COLORS ====== */
  --border-light: #cccccc;         /* Standard light borders */
  --border-subtle: #c6c6c6;        /* Very subtle borders */
  --border-primary: var(--primary-bright);  /* Brand colored borders */
  --border-dark: #2F4156; /* Dark borders */
  --border-subtle: #C8D9E6;
  
  /* ====== ACCENT COLORS ====== */
  --accent-green: #CCD3CA;        /* green accents */
  --accent-rose: var(--secondary-bright);        /* rose accents */
  --accent-brown: #693e44;          
  --accent-light-brown: #92656b;    
  --accent-pink: #eba9b3;
  --accent-yellow: #f8e990;
  --accent-light-rose: #FFE1E0;
  --accent-light-teal: #bdd7df;
  --accent-teal: #5ea7bd;
  --accent-blue: #1f4a7a;
  --accent-bright-blue: #457bb1;
  --accent-marine: #8bb2be;
  --accent-dark-marine: #5e8692;
  
  --accent-blue-gl: #2F4156;
  --accent-light-blue-gl: #C8D9E6;
  --accent-light-marine: #a9c5ce;
  --accent-mauve: #9c6580;
  --accent-light-mauve: #dfaec5;
  /* ====== SHADOW COLORS ====== */
  --shadow-light: rgba(0, 0, 0, 0.1);      /* Standard light shadows */
  --shadow-medium: rgba(128, 123, 123, 0.1); /* Medium gray shadows */
  --shadow-strong: rgba(3, 3, 3, 0.6);     /* Strong dark shadows */
  --shadow-card: rgba(0, 0, 0, 0.1);       /* Card drop shadows */
  
  /* ====== OVERLAY COLORS ====== */
  --overlay-brown: var(--secondary-overlay);
  --overlay-pink: var(--primary-overlay);
  
  /* ====== STATE COLORS ====== */
  --hover-pink: var(--primary-bright);
  --active-pink: var(--primary);
  --focus-pink: var(--primary);
  
  /* ====== GRADIENT BACKGROUNDS ====== */
  --gradient-off-white: linear-gradient(0deg, #F5EFEB 27.69%, rgba(245, 239, 235, 0) 100%);
  
  /* ====== UTILITY COLORS ====== */
  --color-success: #36792d;        /* For success states accent-green */
  --color-warning: #bd8b4b;        /* For warning states */
  --color-danger: #b15e3d;         /* For error states */
  --color-info: #3b5e86;          /* For info states */

  /* ====== BADGE BACKGROUND COLORS ====== */
    /* Badge Colors */
  --badge-accent-green-bg: #6d9e67;
  --badge-accent-rose-bg: var(--accent-rose);
  --badge-accent-light-rose-bg: var(--accent-light-rose);
  --badge-accent-teal-bg: var(--accent-teal);
  --badge-accent-mauve-bg: #7a5064;
  --badge-accent-orange-bg: #b15e3d;
  --badge-accent-blue-bg: var(--accent-blue);
  --badge-accent-light-blue-bg: var(--accent-bright-blue);
}

/* ====== SEMANTIC COLOR ALIASES ====== */
:root {
  /* Button Colors */
  --btn-primary-bg: var(--primary);
  
  --btn-primary-hover: var(--primary-bright);
  --btn-primary-border: var(--primary);
  --btn-primary-text: var(--text-white);
  --btn-primary-hover-text: var(--text-dark);
  
  --btn-secondary-bg: var(--secondary);
  --btn-secondary-hover: var(--secondary-bright);
  --btn-secondary-hover-bg: var(--secondary-bright);
  --btn-secondary-border: var(--secondary-bright);
  --btn-secondary-text: var(--text-dark-alt);
  --btn-secondary-hover-text: var(--text-white);
  
  --btn-accent-bg: var(--accent-light-mauve);
  --btn-accent-hover: var(--accent-mauve);
  --btn-accent-hover-bg: var(--accent-mauve);
  --btn-accent-border: var(--accent-mauve);
  --btn-accent-text: var(--text-dark-alt);
  --btn-accent-hover-text: var(--text-white);
  
  /* Card Colors */
  --card-bg: var(--bg-white);
  --card-border: var(--border-light);
  --card-shadow: var(--shadow-card);
  --card-accent-bg: var(--secondary-muted);
  
  /* Header Colors */
  --header-bg: var(--bg-off-white);
  --header-text: var(--text-primary);
  --header-accent: var(--primary);
  /* Footer Colors */
  --footer-bg: var(--bg-off-white);
  --footer-text: var(--text-primary);
  --footer-accent: var(--primary);
  
  /* Form Colors */
  --form-bg: var(--bg-light-gray);
  --form-border: var(--border-light);
  --form-focus: var(--primary);
  --form-text: var(--text-primary);
  

}

/* ====== COLOR SCHEME VARIANTS (for future use) ====== */
/* 
:root[data-theme="dark"] {
  --bg-white: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
}
*/