/* =========================================================================
   variables.css — SINGLE THEME CONFIG for the Ballettschule Halitz frontend
   This is the ONE place to change the look. Every other CSS file reads its
   colors, fonts and background image from the variables defined here.
   For media that lives in HTML/JS (videos, photos) see assets/js/site-config.js.
   ========================================================================= */

/* Webfont used across the whole site; swap the family here and in --body-font. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
    --header-height: 4.5rem;

    /* ===== BRAND COLORS — edit these to re-skin the site =================== */
    /* Master hue (335 = raspberry/crimson) feeding all hsl() based tints. */
    --hue-color: 335;

    /* Dark plum/burgundy used for text, header and footer. */
    --black--color: #45242d;
    --black--color-alt: #45242d;
    --title-color: #45242d;

    /* Pure black/white shortcuts. */
    --black-pure: #000;
    --white-color: #FFF;

    /* Purple accent used for glows and highlights. */
    --accent-color: rgb(187, 112, 174);

    /* RGB triplets — let other files build rgba(var(--x-rgb), opacity).
       Change the brand color above AND its triplet here to keep them in sync. */
    --plum-rgb: 69, 36, 45;       /* matches --black--color #45242d */
    --accent-rgb: 187, 112, 174;  /* matches --accent-color           */
    --white-rgb: 255, 255, 255;
    --shadow-rgb: 0, 0, 0;        /* base for drop shadows             */

    /* Neutral grays for body copy and surfaces. */
    --neutral-dark: #1a1a1a;
    --neutral-mid: #333;
    --neutral-light: #888;
    --surface-soft: #fcfcfc;
    --surface-muted: #f8f8f8;

    /* Text colors for light backgrounds. */
    --text-color: hsl(var(--hue-color), 20%, 25%);
    --text-color-light: hsl(var(--hue-color), 15%, 45%);

    /* Light surfaces / page base. */
    --body-color: hsl(var(--hue-color), 40%, 98%);
    --container-color: #FFF;

    /* Accent tints derived from the master hue. */
    --first-color: hsl(var(--hue-color), 60%, 50%);
    --first-color-alt: hsl(var(--hue-color), 60%, 45%);
    --first-color-light: hsl(var(--hue-color), 60%, 85%);

    --border-color: hsl(var(--hue-color), 20%, 85%);

    /* Gradient used for headline text. */
    --text-gradient: linear-gradient(to right, hsl(var(--hue-color), 60%, 40%), hsl(var(--hue-color), 70%, 60%));

    --scroll-trumb-color: hsl(var(--hue-color), 20%, 80%);
    --scroll-trumb-color-alt: hsl(var(--hue-color), 20%, 70%);

    /* ===== BACKGROUND ASSETS — change the page background here ============= */
    /* Path is relative to the CSS file (assets/css/), so step up to /img. */
    --bg-image: url('../../img/Ballerina-Background.png');
    /* Translucent white wash laid over the background image for readability. */
    --bg-overlay: linear-gradient(135deg, rgba(var(--white-rgb), 0.9), rgba(240, 240, 240, 0.85));

    /* ===== FONTS & TYPOGRAPHY ============================================= */
    --body-font: 'Open Sans', sans-serif;
    --luxury-font: 'Open Sans', sans-serif;
    --biggest-font-size: 3.5rem;
    --bigger-font-size: 2.8rem;
    --big-font-size: 2.2rem;
    --h1-font-size: 1.8rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.3rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.9rem;
    --smaller-font-size: 0.8rem;
    --text-line-height: 1.6rem;

    /* Font weights. */
    --font-medium: 500;
    --font-semi-bold: 600;

    /* Bottom-margin spacing scale. */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /* Stacking order. */
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}