/* themes.css — CSS variables only, no layout rules needed */
/* ═══════════════════════════════════════════════════════════
   THEMES.CSS — Bao Bì Tân Long
   Load TRƯỚC shared.css trong master.blade.php
   
   RULE: Mỗi theme define ĐẦY ĐỦ cả 2 hệ biến:
     --primary-* : home.css, lien-he.css, tin-tuc.css, dich-vu.css, kho-hang.css
     --blue-*    : shared.css, san-pham.css, chi-tiet-san-pham.css,
                   chi-tiet-tin-tuc.css, gioi-thieu.css
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   1. THEME BLUE — Mặc định
══════════════════════════════════════════ */
:root,
[data-theme="blue"] {
    --primary:        #1565c0;
    --primary-dark:   #0d47a1;
    --primary-deep:   #082d6e;
    --primary-mid:    #1976d2;
    --primary-light:  #e3f0fb;
    --primary-navy:   #0d2348;

    --blue:           #1565c0;
    --blue-dark:      #0d47a1;
    --blue-deep:      #082d6e;
    --blue-mid:       #1976d2;
    --blue-light:     #e3f0fb;

    --accent:         #f5c518;
    --accent-dark:    #e6b800;
    --yellow:         #f5c518;

    --nav-bg-from:    #082d6e;
    --nav-bg-to:      #0d47a1;

    --shadow-primary: rgba(21,101,192,0.13);
    --shadow-lg:      rgba(21,101,192,0.18);
    --btn-glow:       rgba(21,101,192,0.3);

    --rgb-primary:    21,101,192;
    --rgb-deep:       8,45,110;
    --rgb-dark:       13,71,161;
}


/* ══════════════════════════════════════════
   2. THEME EMERALD — Xanh lá
══════════════════════════════════════════ */
[data-theme="emerald"] {
    --primary:        #219940;
    --primary-dark:   #166d2d;
    --primary-deep:   #0d4a1f;
    --primary-mid:    #2ab04a;
    --primary-light:  #e6f7ec;
    --primary-navy:   #0a3318;

    --blue:           #219940;
    --blue-dark:      #166d2d;
    --blue-deep:      #0d4a1f;
    --blue-mid:       #2ab04a;
    --blue-light:     #e6f7ec;

    --accent:         #f5c518;
    --accent-dark:    #e6b800;
    --yellow:         #f5c518;

    --nav-bg-from:    #0d4a1f;
    --nav-bg-to:      #166d2d;

    --shadow-primary: rgba(33,153,64,0.13);
    --shadow-lg:      rgba(33,153,64,0.18);
    --btn-glow:       rgba(33,153,64,0.3);

    --rgb-primary:    33,153,64;
    --rgb-deep:       13,74,31;
    --rgb-dark:       22,109,45;
}


/* ══════════════════════════════════════════
   3. THEME OLIVE — Xanh ô liu
══════════════════════════════════════════ */
[data-theme="olive"] {
    --primary:        #558b2f;
    --primary-dark:   #33691e;
    --primary-deep:   #1b5e20;
    --primary-mid:    #7cb342;
    --primary-light:  #f1f8e9;
    --primary-navy:   #1b5e20;

    --blue:           #558b2f;
    --blue-dark:      #33691e;
    --blue-deep:      #1b5e20;
    --blue-mid:       #7cb342;
    --blue-light:     #f1f8e9;

    --accent:         #f9a825;
    --accent-dark:    #f57f17;
    --yellow:         #f9a825;

    --nav-bg-from:    #1b5e20;
    --nav-bg-to:      #33691e;

    --shadow-primary: rgba(51,105,30,0.13);
    --shadow-lg:      rgba(51,105,30,0.18);
    --btn-glow:       rgba(51,105,30,0.3);

    --rgb-primary:    51,105,30;
    --rgb-deep:       27,94,32;
    --rgb-dark:       51,105,30;
}


/* ══════════════════════════════════════════
   4. THEME NÂU KRAFT — Đặc trưng ngành bao bì
══════════════════════════════════════════ */
[data-theme="kraft"] {
    --primary:        #8b5e3c;
    --primary-dark:   #6d4226;
    --primary-deep:   #4a2c18;
    --primary-mid:    #a67c52;
    --primary-light:  #f5ede4;
    --primary-navy:   #3b2010;

    --blue:           #8b5e3c;
    --blue-dark:      #6d4226;
    --blue-deep:      #4a2c18;
    --blue-mid:       #a67c52;
    --blue-light:     #f5ede4;

    --accent:         #f5c518;
    --accent-dark:    #e6b800;
    --yellow:         #f5c518;

    --nav-bg-from:    #4a2c18;
    --nav-bg-to:      #6d4226;

    --shadow-primary: rgba(139,94,60,0.13);
    --shadow-lg:      rgba(139,94,60,0.18);
    --btn-glow:       rgba(139,94,60,0.3);

    --rgb-primary:    139,94,60;
    --rgb-deep:       74,44,24;
    --rgb-dark:       109,66,38;
}