/*
 * Centralized Color Scheme for Wedding Website
 * Elegant Beige & Teal Theme
 */

:root {
    /* Primary Brand Colors */
    --primary-beige: #E3DFD3;
    --primary-beige-light: #F5F3EE;
    --primary-beige-dark: #C5BFAD;
    --primary-teal: #506766;
    --primary-teal-light: #6b8584;
    --primary-teal-dark: #3d504f;

    /* Background Colors */
    --bg-light: #faf9f7;
    --bg-white: #ffffff;
    --bg-card: #f8f6f3;
    --bg-input: #fafbfc;

    /* Text Colors */
    --text-primary: var(--primary-teal);
    --text-secondary: #6b8584;
    --text-tertiary: #99968E;
    --text-white: #ffffff;

    /* Border Colors */
    --border-light: #e8ecf0;
    --border-medium: #ddd;
    --border-teal: var(--primary-teal);

    /* Status Colors */
    --success-green: #27ae60;
    --danger-red: #e74c3c;
    --danger-red-dark: #c0392b;
    --like-red: #e74c3c;

    /* Button Type 1: Beige background with teal text */
    --btn-primary-bg: var(--primary-beige);
    --btn-primary-text: var(--primary-teal);
    --btn-primary-hover-bg: #d4cfc1;
    --btn-primary-hover-text: var(--primary-teal-dark);

    /* Button Type 2: Teal background with beige text (inverted) */
    --btn-secondary-bg: var(--primary-teal);
    --btn-secondary-text: var(--primary-beige);
    --btn-secondary-hover-bg: var(--primary-teal-dark);
    --btn-secondary-hover-text: var(--primary-beige);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--btn-primary-bg) 0%, #d4cfc1 100%);
    --gradient-primary-hover: linear-gradient(135deg, #d4cfc1 0%, #c5bfaf 100%);
    --gradient-secondary: linear-gradient(135deg, var(--btn-secondary-bg) 0%, var(--primary-teal-light) 100%);
    --gradient-secondary-hover: linear-gradient(135deg, var(--primary-teal-dark) 0%, var(--primary-teal) 100%);
    --gradient-admin-bg: linear-gradient(135deg, #3d504f 0%, #6b8584 100%);

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(80, 103, 102, 0.15);
    --shadow-md: 0 4px 15px rgba(80, 103, 102, 0.2);
    --shadow-lg: 0 8px 25px rgba(80, 103, 102, 0.25);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(80, 103, 102, 0.15);
    --focus-ring-lg: 0 0 0 4px rgba(80, 103, 102, 0.15);

    /* Opacity Overlays */
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(255, 255, 255, 0.95);
    --overlay-glass: rgba(255, 255, 255, 0.2);
}