/**
 * Kashkaval Garden - Design Variables
 * Centralized colors and fonts matching Square site
 */

:root {
    /* ========== FONTS ========== */
    --primary-font: "Playfair Display", serif;
    --secondary-font: "Libre Franklin", sans-serif;
    --ui-font: "Libre Franklin", sans-serif;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Applications */
    --title-font: var(--primary-font);
    --body-font: var(--secondary-font);
    --nav-font: var(--ui-font);
    --button-font: var(--ui-font);
    --heading-font: var(--primary-font);

    /* ========== COLORS ========== */
    /* Primary Colors */
    --primary-color: #9B804A;
    --primary-gold: #9B804A;
    --dark-green: #132A1F;
    --cream: #F2EDE3;
    --accent-red: #d51010;

    /* Grays */
    --gray-light-one: #f8f7f7;
    --gray-light-two: #e6e6e6;
    --gray-dark: #4d4d4d;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Primary Variations */
    --primary-bright-dark: #5c4923;
    --primary-subtle-dark: #30291d;
    --primary-bright-light: #dcc9a3;
    --primary-subtle-light: #f5f3ef;

    /* Dark Green Variations */
    --dark-green-lighter: #1a3528;
    --dark-green-darker: #0d1a15;

    /* Background Colors */
    --site-background: var(--dark-green);
    --element-background: var(--dark-green);
    --box-background: var(--dark-green);

    /* Button Colors */
    --button-background: var(--primary-gold);
    --button-hover: #7d6838;
    --button-active: var(--primary-gold);
    --button-text: var(--color-white);

    /* Navigation Colors */
    --nav-background: var(--dark-green);
    --nav-text: var(--color-white);
    --nav-hover: var(--primary-gold);

    /* Text Colors */
    --text-primary: var(--color-white);
    --text-secondary: var(--gray-light-one);
    --text-cream: #F2EDE3;
    --text-on-light: var(--dark-green);
    --text-accent: var(--primary-gold);

    /* Border Colors */
    --border-color: var(--dark-green);
    --border-light: var(--gray-light-two);
}
/* Apply CSS Variables - Add to top of styles.css */

/* Body and base */
body {
    font-family: var(--body-font) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font) !important;
}

/* Navigation */
.navbar,
.navbar-nav {
    font-family: var(--nav-font) !important;
}

/* Buttons */
.btn, 
.btn-default, 
.btn-rayen {
    font-family: var(--button-font) !important;
}

/* Replace specific color instances */
.btn-default {
    background: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.btn-default:hover {
    background: var(--dark-green-lighter) !important;
}

/* Navigation and menu elements */
.navbar {
    background: var(--nav-background) !important;
}

/* Element boxes */
.element-box-bg,
.element-services .element-wrapper,
.element-content .element-wrapper {
    background: var(--box-background) !important;
}

/* Text colors */
.color2 {
    color: var(--primary-gold) !important;
}

/* Service boxes and content */
.element-services,
.service-item {
    color: var(--text-primary) !important;
}