/* ==========================================================
   ### COLORS / DESIGN TOKENS ###

   SOURCE OF TRUTH:
   All site colours are defined HERE in user.css.

   Joomla / Cassiopeia backend colour settings are not used.

   The Cassiopeia-compatible variables such as:
   --body-bg
   --headerbg
   --footerbg
   etc.

   are deliberately defined here because Cassiopeia itself
   still uses those names internally.

   Structure:

   1. Actual colour palette
   2. Cassiopeia compatibility variables
   3. Semantic site colours
   ========================================================== */
:root {
    --font-display: "Fraunces", Georgia, serif;

    /* ======================================================
       1. ACTUAL COLOUR PALETTE
       ====================================================== */

    /* --- Neutral --- */

    --color-blackish: #2d2d2d;
    --color-charcoal: #3f3f3f;
    --color-offwhite: #F8F1ED;

    --color-grey: #808080;
    --color-mid-grey: #A8A8A8;
    --color-light-grey: #CCCCCC;
    --color-lighter-grey: #ddd;
    --color-white-grey: #f5f5f5;


    /* --- Warm --- */

    --color-light-orange: #F0E2DD;

    --color-cream: #F4E9E3;
    --color-cream-deep: #EDE1DC;

    --color-taupe: #C6A08D;
    --color-taupe-deep: #9F7E6E;

    --color-terracotta: #C9885F;
    --color-terracotta-deep: #92572A;
    --color-terra-red: #C46A52;


    /* --- Blue --- */

    --color-powder-blue: #B8CDDE;
    --color-blue-muted: #7E9CAE;
    --color-blue-deep: #407183;


    /* --- Sage --- */

    --color-sage: #CAD5B5;
    --color-sage-deep: #87AA7B;

    /* ======================================================
       2. CASSIOPEIA COMPATIBILITY VARIABLES

       These names are used by Joomla / Cassiopeia CSS.
       Their values are owned by THIS file, not by the backend.
       ====================================================== */

    --headerbg: var(--color-blackish);
    --headercolor: var(--color-offwhite);

    --body-bg: var(--color-white-grey);
    --body-color: var(--color-grey);

    --link-color: var(--color-taupe-deep);
    --link-hover-color: var(--color-taupe);

    --btnbg: var(--color-offwhite);
    --btnbgh: var(--color-taupe);
    --btncolor: var(--color-grey);
    --btncolorh: var(--color-grey);

    --footerbg: var(--color-charcoal);
    --footercolor: var(--color-offwhite);

    /* ======================================================
   CASSIOPEIA COMPATIBILITY VARIABLES Part 2

   Cassiopeia still uses these internally.
   Their values are controlled here — never in Joomla.
   ====================================================== */

    --hue: 20;

    --template-bg-light: var(--color-offwhite);
    --template-text-dark: var(--color-charcoal);
    --template-text-light: var(--color-offwhite);

    --template-link-color: var(--link-color);
    --template-special-color: var(--color-charcoal);

    /* Cassiopeia font compatibility */

    --cassiopeia-font-family-body: var(--font-main);
    --cassiopeia-font-family-headings: var(--font-main);

    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 600;

    /* ======================================================
    CASSIOPEIA COMPATIBILITY VARIABLES Part 3 !

    Cassiopeia template.css still references these names.
    Their values are controlled here in user.css.
    ====================================================== */

    --cassiopeia-color-primary: var(--headerbg);
    --cassiopeia-color-link: var(--link-color);
    --cassiopeia-color-hover: var(--link-hover-color);

    --template-bg-light: var(--color-offwhite);
    --template-text-dark: var(--color-charcoal);
    --template-text-light: var(--color-offwhite);

    --template-link-color: var(--link-color);
    --template-special-color: var(--color-charcoal);



    /* ======================================================
       3. SEMANTIC SITE COLOURS
       ====================================================== */


    /* --- Page / Content --- */

    --color-page-bg: var(--body-bg);
    --color-content-bg: var(--color-white-grey);

    --color-text: var(--body-color);
    --color-text-dark: var(--color-charcoal);
    --color-text-muted: var(--color-mid-grey);

    --color-title: var(--color-charcoal);
    --heading-color: var(--color-title);


    /* --- Sections --- */

    --color-section-bg-default: var(--body-bg);
    --color-section-bg-warm: var(--color-light-orange);
    --color-section-bg-dark: var(--color-charcoal);


    /* --- Links --- */

    --color-link: var(--link-color);
    --color-link-hover: var(--link-hover-color);


    /* --- Header --- */

    --color-header-bg: var(--headerbg);
    --color-header-text: var(--headercolor);


    /* --- Main Menu --- */

    --color-menu-bg: var(--body-bg);
    --color-menu-text: var(--headerbg);

    --color-menu-current-bg: var(--headerbg);
    --color-menu-current-text: var(--headercolor);

    --color-menu-divider: var(--color-light-grey);


    /* --- Buttons --- */

    --color-button-bg: var(--btnbg);
    --color-button-text: var(--btncolor);

    --color-button-border: var(--btnbg);

    --color-button-hover-bg: var(--btnbgh);
    --color-button-hover-text: var(--btncolorh);

    --color-button-hover-border: var(--btnbgh);


    /* --- Footer --- */

    --color-footer-bg: var(--footerbg);
    --color-footer-text: var(--footercolor);


    /* --- Comments / Quotes --- */

    --color-comment-bg: var(--color-cream);
    --color-comment-text: var(--color-terracotta-deep);
    --color-comment-extra: var(--color-terra-red);

    --color-quote-text: var(--color-terra-red);


    /* --- Feature Colours --- */

    --color-feature-warm-bg: var(--color-terracotta);
    --color-feature-warm-text: var(--color-charcoal);

    --color-feature-blue-bg: var(--color-powder-blue);
    --color-feature-blue-text: var(--color-charcoal);

    --color-feature-green-bg: var(--color-sage);
    --color-feature-green-text: var(--color-charcoal);


    /* --- Blog Articles --- */

    --color-article-bg-1: var(--body-bg);
    --color-article-bg-2: var(--body-bg);
    --color-article-bg-3: var(--body-bg);


    /* --- Miscellaneous --- */

    --color-shadow-soft: rgb(45 45 45 / 15%);
}

/* ================= COLORS / DESIGN TOKENS END ============= */

/* ==========================================================
   ### TEXT COLOURS ###
   Colour only. May be combined with any text presentation.
   ========================================================== */

.u-TextMuted { color: var(--color-text-muted); }
.u-TextWarm { color: var(--color-terracotta-deep); }
.u-TextBlue { color: var(--color-blue-deep); }
.u-TextGreen { color: var(--color-sage-deep); }

/* ==================== TEXT COLOURS END ==================== */


/* ==========================================================
   ### BACKGROUND COLOURS ###
   Background colour only. No padding, margins or typography.
   ========================================================== */

.u-BgWarm { background: var(--color-cream); }
.u-BgGrey { background: var(--color-light-grey); }
.u-BgTerracotta { background: var(--color-terracotta); }
.u-BgBlue { background: var(--color-powder-blue); }
.u-BgGreen { background: var(--color-sage); }

/* ================= BACKGROUND COLOURS END ================= */