/* =====================================================================
   SALON – THEME COLOURS (single source of truth)
   ---------------------------------------------------------------------
   Every colour used by the website, the admin panel and the home page
   comes from the variables below. Change a value here and it changes
   everywhere.

   Easiest way: Admin > Theme & Colours (no code needed). Values saved
   there are printed after this file and override these defaults.

   --navy      = primary brand colour   (header text, headings, dark sections)
   --saffron   = accent brand colour    (buttons, highlights, icons)
   The *-rgb versions are the same colours as "R, G, B" so they can be
   used with transparency:  rgba(var(--navy-rgb), .35)
   ===================================================================== */
:root {
    /* ---- Primary (plum – variable names kept as "navy") ---- */
    --navy: #4a1238;
    --navy-2: #6b1d52;          /* lighter primary – gradients            */
    --navy-3: #8e3170;          /* lightest primary – charts, gradients   */
    --navy-dark: #2e0a23;       /* darkest primary – top bar, footer      */
    --navy-rgb: 74, 18, 56;
    --navy-dark-rgb: 46, 10, 35;

    /* ---- Accent (rose – variable names kept as "saffron") ---- */
    --saffron: #e0457b;
    --saffron-2: #c2185b;       /* deeper accent – gradient end, links    */
    --gold: #f3c98b;            /* highlight text on dark backgrounds     */
    --saffron-rgb: 224, 69, 123;
    --saffron-2-rgb: 194, 24, 91;
    --gold-rgb: 243, 201, 139;

    /* ---- Neutrals ---- */
    --ink: #2b1024;             /* main text                               */
    --body-text: #4a3443;       /* long-form paragraph text                */
    --muted: #7a6373;           /* secondary text                          */
    --ivory: #fff7f9;           /* light section background                */
    --cream: #fdeaf1;           /* icon chips, soft fills                  */
    --accent-soft: #fde4ee;     /* very light accent tint                  */
    --surface: #fcf8f9;         /* input / table header background         */
    --line: #efe1e7;            /* borders                                 */
    --white: #ffffff;

    /* ---- Text on dark (navy) backgrounds ---- */
    --on-dark: #f1d9e6;
    --on-dark-muted: #d6b3c8;

    /* ---- Status colours (used in admin) ---- */
    --success: #13803f;
    --success-soft: #e3f6ea;
    --danger: #b91c1c;
    --danger-soft: #fde8e8;
    --whatsapp: #25d366;

    /* ---- Gradients (built from the colours above) ---- */
    --grad: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-2) 100%);
    --grad-navy: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-2) 100%);

    /* ---- Shape & type ---- */
    --radius: 18px;
    --shadow: 0 18px 50px -22px rgba(var(--navy-rgb), .35);
    --shadow-sm: 0 8px 24px -12px rgba(var(--navy-rgb), .25);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Playfair Display', Georgia, serif;
}