/* ============================================================
   DAR JULIET — ROSE GOLD THEME | CSS Variables & Design Tokens
   Odoo 19 Compatible
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --dj-pink:          #B5737A;   /* Primary Rose */
    --dj-pink-light:    #D4979F;   /* Light Rose */
    --dj-pink-pale:     #FCF0F1;   /* Pale Rose BG */
    --dj-gold:          #C9935A;   /* Primary Gold */
    --dj-gold-light:    #E8C49A;   /* Light Gold */
    --dj-gold-dark:     #8B5A2A;   /* Dark Gold */
    --dj-emerald:       #1B4D3E;   /* Accent Emerald */
    --dj-dark:          #2A1015;   /* Deep Dark */
    --dj-dark2:         #3D1820;   /* Dark 2 */
    --dj-text:          #2A1015;   /* Body Text */
    --dj-muted:         #8A6068;   /* Muted Text */
    --dj-pearl:         #FDF7F8;   /* Background */
    --dj-border:        rgba(0,0,0,0.08);

    /* ── Typography ── */
    --dj-font-ar:       'Cairo', sans-serif;
    --dj-font-en:       'Playfair Display', serif;

    /* ── Spacing ── */
    --dj-container:     1200px;
    --dj-nav-h:         84px;
    --dj-section-py:    72px;
    --dj-radius:        2px;

    /* ── Shadows ── */
    --dj-shadow-sm:     0 2px 12px rgba(0,0,0,0.06);
    --dj-shadow-md:     0 8px 32px rgba(0,0,0,0.10);
    --dj-shadow-lg:     0 16px 56px rgba(0,0,0,0.14);
    --dj-shadow-pink:   0 8px 24px rgba(181,115,122,0.35);

    /* ── Gradients ── */
    --dj-grad-hero:     linear-gradient(155deg, #150008 0%, #2A1015 40%, #3D1820 75%, #4A1525 100%);
    --dj-grad-rose:     linear-gradient(135deg, var(--dj-pink), var(--dj-pink-light));
    --dj-grad-gold:     linear-gradient(90deg, var(--dj-pink), var(--dj-gold));

    /* ── Transitions ── */
    --dj-trans:         all 0.3s ease;
    --dj-trans-fast:    all 0.15s ease;
}

/* ── Override Odoo Bootstrap variables ── */
:root {
    --o-color-1:        var(--dj-pink);
    --o-color-2:        var(--dj-gold);
    --o-color-3:        var(--dj-emerald);
    --o-color-4:        var(--dj-dark);
    --o-color-5:        var(--dj-pearl);

    /* Website color palette */
    --color-alpha:      var(--dj-pink);
    --color-beta:       var(--dj-gold);
    --color-gamma:      var(--dj-emerald);
    --color-delta:      var(--dj-dark);
    --color-epsilon:    var(--dj-pearl);
}
