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

:root {
  /* ====== PRIMARY BRAND COLORS ====== */
  --primary-pink: #f0cccc;
  --primary-pink-bright: #e66c6c;
  --primary-pink-overlay: #db8c8c;
  --primary-pink-subtle: #fcd1d1;
  
  /* ====== SECONDARY BRAND COLORS ====== */
  --secondary-tan: #664F42;
  --secondary-light-brown: #aa846f;
  --secondary-brown-overlay: #aa846f;
  --secondary-muted-tan: #968074;
  
  /* ====== TEXT COLORS ====== */
  --text-primary: #333333;          /* Main headings, primary text */
  --text-secondary: #473a34;        /* Secondary text, descriptions */
  --text-muted: #a0948e;           /* Muted text */
  --text-light: var(--bg-off-white);           /* Light text on dark backgrounds */
  --text-dark: #292a29;            /* Alternative dark text */
  --text-white: #ffffff;           /* White text */
  --text-dark-alt: #53565A;        /* Alternative dark text variant */
  --text-rose: var(--accent-rose);       /* Alternative accent-rose text variant */
  --text-fr: #53565A;        /* Face Reality section text */
  /* ====== BACKGROUND COLORS ====== */
  --bg-white: #ffffff;             /* Pure white backgrounds */
  --bg-off-white: #fef9f1;         /* Warm off-white sections - default page background */
  --bg-light-gray: #aa9ea0;        /* Light gray backgrounds */
  --bg-alt: #d6c3c7;        /* Light gray backgrounds */
  --bg-subtle: #fef9f1;           /* Subtle background tint */
  --bg-fr-grey: #F2F2F3;        /* Face Reality section background */
  
  /* ====== BORDER COLORS ====== */
  --border-light: #cccccc;         /* Standard light borders */
  --border-subtle: #fef9f1;        /* Very subtle borders */
  --border-primary: var(--primary-pink);  /* Brand colored borders */
  --border-dark: var(--secondary-light-brown);  /* Dark borders */
  
  /* ====== ACCENT COLORS ====== */
  --accent-green: #CCD3CA;        /* green accents */
  --accent-rose: #b34b4b;        /* rose accents */
  --accent-brown: #664F42;          
  --accent-light-brown: #aa846f;    
  --accent-pink: var(--primary-pink-bright);
  --accent-yellow: #ecd448;
  --accent-light-rose: #f3c1c1;
  --accent-light-teal: #8bb7b9;
  --accent-light-blue: #DEE6EB;
  --accent-marine: #6C889A;
  --accent-dark-marine: #4B6B7E;
  --accent-blue-gl: #1a436a;
  --accent-light-blue-gl: #7597b5;
  --accent-light-marine: #A3C1D1;
  /* ====== 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-brown-overlay);
  --overlay-pink: var(--primary-pink-overlay);
  
  /* ====== STATE COLORS ====== */
  --hover-pink: var(--primary-pink-bright);
  --active-pink: var(--primary-pink);
  --focus-pink: var(--primary-pink);
  
  /* ====== GRADIENT BACKGROUNDS ====== */
  --gradient-off-white: linear-gradient(0deg, #fef9f1 27.69%, rgba(249, 248, 244, 0) 100%);
  
  /* ====== UTILITY COLORS ====== */
  --color-success: #669b5f;        /* For success states accent-green */
  --color-warning: #a5865d;        /* For warning states */
  --color-danger: #d67148;         /* For error states */
  --color-info: #175470;          /* For info states */

  /* ====== BADGE BACKGROUND COLORS ====== */
    /* Badge Colors */
  --badge-accent-green-bg: #2D423B;
  --badge-accent-rose-bg: rgb(184, 68, 95);
  --badge-accent-brown-bg: var(--accent-brown);
  --badge-accent-teal-bg: #138a91;
  --badge-accent-mauve-bg: #7a5064;
  --badge-accent-orange-bg: #b33333;
  --badge-accent-blue-bg: #236786;
  --badge-accent-light-blue-bg: #6C889A;
}

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

}

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