/* ========================================
   DESIGN SYSTEM
   variables.css
   ======================================== */
:root {
    /* ── Background ── */
    --background:   #101010;
    --foreground:   #f2f2f2;
    --card:         #1a1a1a;
    --border:       #333;
    /* ── Brand ── */
    --primary:      #ff8c3a;
    --success:      #007bff;
    --extra:      #f5576c;
    
    --extra-rgb: 245, 87, 108;
    --success-rgb: 0, 123, 255;

        /* ── Success Green (dùng riêng cho trạng thái thành công, khác --success là accent xanh dương) ── */
    --success-green: #22c55e;
    --success-green-light: #4ade80;
    --success-green-rgb: 34, 197, 94;
    --success-green-glow: rgba(34, 197, 94, 0.35);
    
    /* ── Text ── */
    --text-primary:   #ffffff;
    --text-secondary: #aaaaaa;
    --text-muted:     #999999;
    /* ── Gradients ── */
    --gradient-po:     linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-mart:   linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-cost:   linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* ── Shadows ── */
    --shadow-sm: 0 2px 4px  rgba(0,0,0,0.10);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 12px 24px rgba(0,0,0,0.25);
    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    /* ── Spacing ── */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    /* ── Transitions ── */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* ===== CSS CUSTOM PROPERTIES - DARK LUXURY THEME ===== */
    /* Colors - Dark Luxury Palette */
    --bg: #090909;
    --card-lux: #141414;
    --text: #f5f5f5;
    --muted: #9a9a9a;
    --accent: #c97a3d;
    --accent-rgb: 201, 122, 61;
    --glow: rgba(201, 122, 61, 0.45);
    --gold-light: #e8c87a;
    --gold-lighter: #e8ca9a;
    --text-primary-lux: #ede9df;
    --text-secondary-lux: #9e9484;
    --text-muted-lux: #524e46;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-color-accent: rgba(201, 122, 61, 0.45);

    --text-blue: #2c6bc8;

    --bg-white: #FFFFFF;
    --anim-glow: 2s;
    --border-orange-bright: rgba(246, 134, 49, 0.8);
    --border-orange-dim: rgba(246, 134, 49, 0.4);

    --glow-orange-full:
      0 0 5px rgba(246, 134, 49, 0.6),
      0 0 10px rgba(246, 134, 49, 0.6),
      0 0 20px rgba(246, 134, 49, 0.5);

    --glow-orange-dim:
      0 0 2px rgba(246, 134, 49, 0.3),
      0 0 5px rgba(246, 134, 49, 0.3);

    /* Background Gradients */
    --gradient-dark: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85));
    --gradient-event: linear-gradient(0deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.4) 50%, transparent 100%);

    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-serif: 'Cinzel', serif;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-sm: 14px;
    --font-size-xs: 0.8rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Spacing */
    --spacing-xs-lux: 4px;
    --spacing-sm-lux: 8px;
    --spacing-md-lux: 16px;
    --spacing-lg-lux: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;
    --spacing-5xl: 120px;

    /* Border & Radius */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 12px;
    --border-radius-xl: 28px;
    --border-radius-full: 40px;

    /* Shadows */
    --shadow-sm-lux: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md-lux: 0 8px 32px rgba(200, 170, 130, 0.1);
    --shadow-lg-lux: 0 30px 60px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 40px 120px rgba(0, 0, 0, .8);
    --shadow-focus: 0 0 0 3px rgba(200, 170, 130, 0.05);

    /* Transitions — trùng giá trị với bản gốc, dùng lại --transition-fast/normal/slow phía trên, KHÔNG khai báo lại */
    --transition-bounce: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* ===== BOOKER THEME — DARK GOLD LUXURY (dùng cho BookerPages) ===== */
    --bg-void: #080808;
    --bg-deep: #0e0e0e;
    --bg-surface: #131313;
    --bg-card: #181818;
    --bg-hover: #202020;

    --border-subtle: rgba(255, 255, 255, 0.055);
    --border-mid: rgba(255, 255, 255, 0.11);

    --gold: #c9a84c;
    --gold-dim: rgba(201, 168, 76, 0.13);
    --gold-glow: rgba(201, 168, 76, 0.06);

    --green: #52b788;
    --green-dim: rgba(82, 183, 136, 0.12);

    --red: #e05252;
    --red-dim: rgba(224, 82, 82, 0.1);

    --blue: #6ba3d6;
    --blue-dim: rgba(107, 163, 214, 0.1);

    --font-display: sans-serif;
    /* --font-display: 'Cormorant Garamond', serif; */
    --font-body: 'Outfit', sans-serif;
    --font-mono: 'DM Mono', monospace;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}