/**
 * Last Update: 2026-04-26
 * File: assets/frontend/css/tokens-frontend.css
 * Description: Design tokens — Warm Beige/Gold palette + dark theme override
 *              Inspired by UI reference: warm earth tones, gold accents, cream backgrounds
 */

/* ── Light theme (default) ─────────────────────────────────────────────── */
:root {
    /* Brand gold palette */
    --fe-gold-50:   #FDF8F0;
    --fe-gold-100:  #F5ECD7;
    --fe-gold-200:  #EDD8AD;
    --fe-gold-300:  #E0BF80;
    --fe-gold-400:  #C9A96E;
    --fe-gold-500:  #B8923A;
    --fe-gold-600:  #8B6914;
    --fe-gold-700:  #6B5010;
    --fe-gold-800:  #4A380B;
    --fe-gold-900:  #2A2006;

    /* Warm neutral palette */
    --fe-warm-50:   #FAFAF8;
    --fe-warm-100:  #F5F3EE;
    --fe-warm-200:  #EAE6DC;
    --fe-warm-300:  #D5CEBE;
    --fe-warm-400:  #B8AFA0;
    --fe-warm-500:  #8A8070;
    --fe-warm-600:  #6B6358;
    --fe-warm-700:  #4E4840;
    --fe-warm-800:  #332E28;
    --fe-warm-900:  #1A1714;

    /* Semantic — background */
    --fe-bg:            #FFFFFF;
    --fe-bg-alt:        var(--fe-gold-50);
    --fe-bg-section:    var(--fe-gold-100);
    --fe-bg-card:       #FFFFFF;
    --fe-bg-topbar:     #E8D5B0;
    --fe-bg-header:     #FFFFFF;
    --fe-bg-footer:     var(--fe-warm-800);
    --fe-bg-footer-bottom: var(--fe-warm-900);
    --fe-bg-dropdown:   #FFFFFF;
    --fe-bg-tag:        var(--fe-gold-100);

    /* Semantic — text */
    --fe-text:          var(--fe-warm-900);
    --fe-text-muted:    var(--fe-warm-600);
    --fe-text-light:    var(--fe-warm-400);
    --fe-text-topbar:   var(--fe-gold-700);
    --fe-text-header:   var(--fe-warm-800);
    --fe-text-footer:   var(--fe-warm-300);
    --fe-text-footer-heading: var(--fe-gold-300);
    --fe-text-tag:      var(--fe-gold-700);
    --fe-text-on-gold:  #FFFFFF;

    /* Semantic — brand / accent */
    --fe-primary:       var(--fe-gold-400);
    --fe-primary-hover: var(--fe-gold-500);
    --fe-primary-dark:  var(--fe-gold-600);
    --fe-accent:        var(--fe-gold-300);

    /* Semantic — border */
    --fe-border:        var(--fe-warm-200);
    --fe-border-strong: var(--fe-warm-300);
    --fe-border-gold:   var(--fe-gold-200);

    /* Nav */
    --fe-nav-link:          var(--fe-warm-800);
    --fe-nav-link-hover:    var(--fe-gold-600);
    --fe-nav-link-active:   var(--fe-gold-600);
    --fe-nav-underline:     var(--fe-gold-400);
    --fe-dropdown-bg:       #FFFFFF;
    --fe-dropdown-shadow:   0 8px 32px rgba(139,105,20,0.12);
    --fe-dropdown-link:     var(--fe-warm-700);
    --fe-dropdown-link-hover: var(--fe-gold-600);
    --fe-dropdown-link-hover-bg: var(--fe-gold-50);

    /* Breadcrumb */
    --fe-breadcrumb-link:   var(--fe-gold-600);
    --fe-breadcrumb-sep:    var(--fe-warm-400);
    --fe-breadcrumb-current:var(--fe-warm-600);

    /* Shadow */
    --fe-shadow-sm:   0 1px 3px rgba(74,56,11,0.08);
    --fe-shadow-md:   0 4px 16px rgba(74,56,11,0.10);
    --fe-shadow-lg:   0 8px 32px rgba(74,56,11,0.14);
    --fe-shadow-header: 0 2px 12px rgba(74,56,11,0.10);

    /* Spacing */
    --fe-container-max: 1200px;
    --fe-container-px:  24px;
    --fe-section-py:    80px;
    --fe-header-h:      72px;
    --fe-topbar-h:      40px;

    /* Radius */
    --fe-radius-sm:  4px;
    --fe-radius-md:  8px;
    --fe-radius-lg:  16px;
    --fe-radius-pill:999px;

    /* Typography */
    --fe-font-body:    'Noto Sans Thai', 'Inter', sans-serif;
    --fe-font-heading: 'Noto Sans Thai', 'Inter', sans-serif;
    --fe-font-size-base: 16px;
    --fe-line-height:    1.75;

    /* Transition */
    --fe-transition:      150ms ease;
    --fe-transition-med:  250ms ease;
    --fe-transition-slow: 400ms ease;
}

/* ── Dark theme override ────────────────────────────────────────────────── */
[data-theme="dark"] {
    --fe-bg:            #1C1A16;
    --fe-bg-alt:        #252219;
    --fe-bg-section:    #2A261E;
    --fe-bg-card:       #252219;
    --fe-bg-topbar:     #0F0E0A;
    --fe-bg-header:     #1C1A16;
    --fe-bg-footer:     #141210;
    --fe-bg-footer-bottom: #0A0908;
    --fe-bg-dropdown:   #252219;
    --fe-bg-tag:        rgba(201,169,110,0.15);

    --fe-text:          #EAE6DC;
    --fe-text-muted:    var(--fe-warm-400);
    --fe-text-light:    var(--fe-warm-600);
    --fe-text-topbar:   var(--fe-warm-300);
    --fe-text-header:   var(--fe-warm-100);
    --fe-text-footer:   var(--fe-warm-400);
    --fe-text-footer-heading: var(--fe-gold-400);
    --fe-text-tag:      var(--fe-gold-400);

    --fe-primary:       var(--fe-gold-400);
    --fe-primary-hover: var(--fe-gold-300);
    --fe-primary-dark:  var(--fe-gold-300);
    --fe-accent:        var(--fe-gold-400);

    --fe-border:        rgba(255,255,255,0.08);
    --fe-border-strong: rgba(255,255,255,0.14);
    --fe-border-gold:   rgba(201,169,110,0.25);

    --fe-nav-link:          var(--fe-warm-200);
    --fe-nav-link-hover:    var(--fe-gold-300);
    --fe-nav-link-active:   var(--fe-gold-300);
    --fe-nav-underline:     var(--fe-gold-400);
    --fe-dropdown-bg:       #252219;
    --fe-dropdown-shadow:   0 8px 32px rgba(0,0,0,0.4);
    --fe-dropdown-link:     var(--fe-warm-200);
    --fe-dropdown-link-hover: var(--fe-gold-300);
    --fe-dropdown-link-hover-bg: rgba(201,169,110,0.10);

    --fe-breadcrumb-link:   var(--fe-gold-400);
    --fe-breadcrumb-sep:    var(--fe-warm-600);
    --fe-breadcrumb-current:var(--fe-warm-400);

    --fe-shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --fe-shadow-md:   0 4px 16px rgba(0,0,0,0.4);
    --fe-shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
    --fe-shadow-header: 0 2px 12px rgba(0,0,0,0.4);
}