/* ═══════════════════════════════════════════════════════════════
   MOTOBOOKING — DESIGN TOKENS
   Clean Minimalist · Light Theme
═══════════════════════════════════════════════════════════════ */
:root {
    /* Palette */
    --bg-void:          #ffffff;
    --bg-base:          #f8f9fa;
    --bg-surface:       #ffffff;
    --bg-raised:        #f1f3f5;
    --bg-card:          #ffffff;
    --bg-glass:         #ffffff;
    --bg-glass-hover:   #f8f9fa;
    --bg-glass-active:  #f1f3f5;
    --bg-overlay:       rgba(0, 0, 0, 0.4);

    --border-faint:     #f1f3f5;
    --border-subtle:    #e9ecef;
    --border-mid:       #dee2e6;
    --border-strong:    #ced4da;
    --border-gold:      rgba(212, 160, 23, 0.25);
    --border-gold-hi:   rgba(240, 198, 52, 0.5);

    /* Primary (golden/amber accent) */
    --gold-deep:    #b8860b;
    --gold:         #d4a017;
    --gold-mid:     #e6b422;
    --gold-bright:  #f0c634;
    --gold-pale:    rgba(212, 160, 23, 0.08);
    --gold-mist:    rgba(212, 160, 23, 0.04);
    --gold-glow:    rgba(240, 198, 52, 0.2);
    --gold-glow-lg: rgba(240, 198, 52, 0.08);

    /* Danger (neutral red — replaces crimson) */
    --crimson:        #dc3545;
    --crimson-bright: #e8384f;
    --crimson-pale:   rgba(220, 53, 69, 0.08);
    --crimson-glow:   rgba(220, 53, 69, 0.1);

    /* Success (replaces teal) */
    --teal:       #22a06b;
    --teal-pale:  rgba(34, 160, 107, 0.08);
    --teal-glow:  rgba(34, 160, 107, 0.1);

    /* Text */
    --text-primary:   #1a1a2e;
    --text-secondary: #495057;
    --text-muted:     #868e96;
    --text-faint:     #adb5bd;
    --text-gold:      #b8860b;
    /* Darker gold for text on WHITE backgrounds — #b8860b on white is only
       3.25:1 (WCAG AA fail); this one is ≈5.3:1. Keep --text-gold for dark
       surfaces (site-admin pages, glass cards). */
    --text-gold-strong: #8a6508;
    --text-crimson:   #dc3545;
    --text-teal:      #22a06b;

    /* Typography */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --font-thai:    'Noto Sans Thai', 'Sarabun', sans-serif;

    /* Radius */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-2xl:  20px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:      0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:      0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl:      0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-gold:    0 2px 12px rgba(212, 160, 23, 0.15);
    --shadow-crimson: 0 2px 8px rgba(220, 53, 69, 0.1);
    --shadow-teal:    0 2px 8px rgba(34, 160, 107, 0.1);
    --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* Motion */
    --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
    --dur-xs:  80ms;
    --dur-sm:  150ms;
    --dur-md:  220ms;
    --dur-lg:  350ms;
    --dur-xl:  500ms;

    /* Z-Index */
    --z-below:  -1;
    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
    --z-cursor:  9999;

    /* Layout */
    --nav-h:  64px;
    --w-sm:   640px;
    --w-md:   768px;
    --w-lg:   1024px;
    --w-xl:   1280px;
    --w-2xl:  1440px;
}