/* ==========================================================================
   THUỒNG LUỒNG MINI — Design Tokens & CSS Custom Properties
   Hệ thống biến thiết kế cho nền tảng khám phá lifestyle Tuyên Quang
   ========================================================================== */

/* --- Nhập font Nunito từ Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap');

:root {
  /* ========================================================================
     MÀU SẮC — Color Palette
     ======================================================================== */

  /* --- Màu chính (Primary - Cam ấm áp) --- */
  --color-primary:          #F4A261;
  --color-primary-dark:     #E76F51;
  --color-primary-darker:   #D44A2E;
  --color-primary-light:    #FDDCB5;
  --color-primary-lighter:  #FEF0E1;
  --color-primary-50:       #FFF8F0;
  --color-primary-100:      #FEF0E1;
  --color-primary-200:      #FDDCB5;
  --color-primary-300:      #FBC88A;
  --color-primary-400:      #F4A261;
  --color-primary-500:      #F4A261;
  --color-primary-600:      #E8893A;
  --color-primary-700:      #E76F51;
  --color-primary-800:      #D44A2E;
  --color-primary-900:      #A83A24;

  /* --- Màu phụ (Secondary - Xanh ngọc) --- */
  --color-secondary:        #2A9D8F;
  --color-secondary-dark:   #21867A;
  --color-secondary-darker: #1A6E65;
  --color-secondary-light:  #5EC4B6;
  --color-secondary-lighter:#B8E8E1;
  --color-secondary-50:     #E6F7F5;
  --color-secondary-100:    #B8E8E1;
  --color-secondary-200:    #8AD9CE;
  --color-secondary-300:    #5EC4B6;
  --color-secondary-400:    #3AB0A2;
  --color-secondary-500:    #2A9D8F;
  --color-secondary-600:    #21867A;
  --color-secondary-700:    #1A6E65;
  --color-secondary-800:    #135750;
  --color-secondary-900:    #0D403B;

  /* --- Nền (Background) --- */
  --color-bg:               #FFFAF5;
  --color-bg-secondary:     #FFF5EB;
  --color-bg-tertiary:      #FEF0E1;
  --color-bg-white:         #FFFFFF;
  --color-bg-dark:          #1A1A2E;
  --color-bg-overlay:       rgba(26, 26, 46, 0.6);
  --color-bg-overlay-light: rgba(255, 255, 255, 0.85);
  --color-bg-card:          #FFFFFF;
  --color-bg-input:         #FFFFFF;
  --color-bg-hover:         #FFF5EB;
  --color-bg-active:        #FDDCB5;
  --color-bg-disabled:      #F5F5F5;

  /* --- Chữ (Text) --- */
  --color-text:             #2D2D2D;
  --color-text-secondary:   #6B7280;
  --color-text-tertiary:    #9CA3AF;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        #E76F51;
  --color-text-link-hover:  #D44A2E;
  --color-text-muted:       #9CA3AF;
  --color-text-heading:     #1F2937;

  /* --- Đánh giá sao (Stars & Rating) --- */
  --color-star:             #FFD700;
  --color-star-empty:       #E5E7EB;
  --color-star-half:        #FFD700;

  /* --- Trạng thái (Status) --- */
  --color-success:          #10B981;
  --color-success-light:    #D1FAE5;
  --color-success-dark:     #059669;
  --color-warning:          #F59E0B;
  --color-warning-light:    #FEF3C7;
  --color-warning-dark:     #D97706;
  --color-danger:           #EF4444;
  --color-danger-light:     #FEE2E2;
  --color-danger-dark:      #DC2626;
  --color-info:             #3B82F6;
  --color-info-light:       #DBEAFE;
  --color-info-dark:        #2563EB;

  /* --- Viền (Border) --- */
  --color-border:           #E5E7EB;
  --color-border-light:     #F3F4F6;
  --color-border-dark:      #D1D5DB;
  --color-border-focus:     #F4A261;
  --color-border-error:     #EF4444;

  /* --- Gradient --- */
  --gradient-primary:       linear-gradient(135deg, #F4A261 0%, #E76F51 100%);
  --gradient-primary-soft:  linear-gradient(135deg, #FDDCB5 0%, #F4A261 100%);
  --gradient-warm:          linear-gradient(135deg, #F4A261 0%, #E76F51 50%, #2A9D8F 100%);
  --gradient-hero:          linear-gradient(135deg, #F4A261 0%, #E76F51 40%, #D44A2E 100%);
  --gradient-sunset:        linear-gradient(180deg, #FEF0E1 0%, #FDDCB5 50%, #F4A261 100%);
  --gradient-card-hover:    linear-gradient(180deg, transparent 0%, rgba(231, 111, 81, 0.05) 100%);
  --gradient-overlay:       linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  --gradient-glass:         linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);

  /* ========================================================================
     TYPOGRAPHY — Hệ thống chữ
     ======================================================================== */

  /* --- Font Family --- */
  --font-primary:           'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* --- Font Size (Fluid - dùng clamp) --- */
  --text-xs:                clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);       /* 10-12px */
  --text-sm:                clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);        /* 12-14px */
  --text-base:              clamp(0.875rem, 0.8rem + 0.25vw, 1rem);          /* 14-16px */
  --text-md:                clamp(1rem, 0.9rem + 0.3vw, 1.125rem);           /* 16-18px */
  --text-lg:                clamp(1.125rem, 1rem + 0.4vw, 1.25rem);          /* 18-20px */
  --text-xl:                clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);          /* 20-24px */
  --text-2xl:               clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);        /* 24-30px */
  --text-3xl:               clamp(1.875rem, 1.5rem + 1vw, 2.25rem);         /* 30-36px */
  --text-4xl:               clamp(2.25rem, 1.8rem + 1.5vw, 3rem);           /* 36-48px */
  --text-5xl:               clamp(3rem, 2.2rem + 2vw, 4rem);                /* 48-64px */
  --text-hero:              clamp(2.5rem, 1.5rem + 3vw, 4.5rem);            /* 40-72px */

  /* --- Font Weight --- */
  --weight-light:           300;
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;
  --weight-extrabold:       800;
  --weight-black:           900;

  /* --- Line Height --- */
  --leading-none:           1;
  --leading-tight:          1.25;
  --leading-snug:           1.375;
  --leading-normal:         1.5;
  --leading-relaxed:        1.625;
  --leading-loose:          2;

  /* --- Letter Spacing --- */
  --tracking-tight:         -0.025em;
  --tracking-normal:        0;
  --tracking-wide:          0.025em;
  --tracking-wider:         0.05em;
  --tracking-widest:        0.1em;

  /* ========================================================================
     SPACING — Hệ thống khoảng cách (base 4px)
     ======================================================================== */
  --space-0:                0;
  --space-px:               1px;
  --space-0-5:              0.125rem;   /* 2px */
  --space-1:                0.25rem;    /* 4px */
  --space-1-5:              0.375rem;   /* 6px */
  --space-2:                0.5rem;     /* 8px */
  --space-2-5:              0.625rem;   /* 10px */
  --space-3:                0.75rem;    /* 12px */
  --space-3-5:              0.875rem;   /* 14px */
  --space-4:                1rem;       /* 16px */
  --space-5:                1.25rem;    /* 20px */
  --space-6:                1.5rem;     /* 24px */
  --space-7:                1.75rem;    /* 28px */
  --space-8:                2rem;       /* 32px */
  --space-9:                2.25rem;    /* 36px */
  --space-10:               2.5rem;     /* 40px */
  --space-12:               3rem;       /* 48px */
  --space-14:               3.5rem;     /* 56px */
  --space-16:               4rem;       /* 64px */
  --space-20:               5rem;       /* 80px */
  --space-24:               6rem;       /* 96px */
  --space-32:               8rem;       /* 128px */
  --space-40:               10rem;      /* 160px */
  --space-48:               12rem;      /* 192px */
  --space-section:          clamp(3rem, 2rem + 3vw, 6rem);  /* Khoảng cách giữa các section */

  /* ========================================================================
     BORDER RADIUS — Bo góc
     ======================================================================== */
  --radius-none:            0;
  --radius-xs:              0.125rem;   /* 2px */
  --radius-sm:              0.25rem;    /* 4px */
  --radius-md:              0.5rem;     /* 8px */
  --radius-lg:              0.75rem;    /* 12px */
  --radius-xl:              1rem;       /* 16px */
  --radius-2xl:             1.25rem;    /* 20px */
  --radius-3xl:             1.5rem;     /* 24px */
  --radius-full:            9999px;
  --radius-card:            var(--radius-xl);
  --radius-btn:             var(--radius-lg);
  --radius-badge:           var(--radius-full);
  --radius-input:           var(--radius-lg);
  --radius-modal:           var(--radius-2xl);
  --radius-img:             var(--radius-lg);

  /* ========================================================================
     SHADOWS — Bóng đổ
     ======================================================================== */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:              0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl:             0 25px 50px rgba(0, 0, 0, 0.12);
  --shadow-inner:           inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Bóng có màu cam (warm shadows) */
  --shadow-warm-sm:         0 2px 8px rgba(244, 162, 97, 0.12);
  --shadow-warm-md:         0 4px 16px rgba(244, 162, 97, 0.16);
  --shadow-warm-lg:         0 8px 32px rgba(244, 162, 97, 0.2);
  --shadow-warm-xl:         0 16px 48px rgba(244, 162, 97, 0.24);

  /* Bóng cho card */
  --shadow-card:            0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:      0 12px 24px rgba(244, 162, 97, 0.15), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-active:     0 4px 8px rgba(244, 162, 97, 0.1);

  /* Bóng cho nút */
  --shadow-btn:             0 2px 4px rgba(244, 162, 97, 0.2);
  --shadow-btn-hover:       0 4px 12px rgba(244, 162, 97, 0.35);

  /* Bóng cho header (glassmorphism) */
  --shadow-header:          0 4px 30px rgba(0, 0, 0, 0.06);

  /* ========================================================================
     TRANSITIONS — Hiệu ứng chuyển đổi
     ======================================================================== */
  --ease-default:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --ease-out:               cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:            cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic:           cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth:            cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-fast:          150ms;
  --duration-normal:        300ms;
  --duration-slow:          500ms;
  --duration-slower:        700ms;
  --duration-slowest:       1000ms;

  --transition-fast:        all var(--duration-fast) var(--ease-default);
  --transition-normal:      all var(--duration-normal) var(--ease-default);
  --transition-slow:        all var(--duration-slow) var(--ease-default);
  --transition-bounce:      all var(--duration-normal) var(--ease-bounce);
  --transition-colors:      color var(--duration-fast) var(--ease-default),
                            background-color var(--duration-fast) var(--ease-default),
                            border-color var(--duration-fast) var(--ease-default);
  --transition-shadow:      box-shadow var(--duration-normal) var(--ease-default);
  --transition-transform:   transform var(--duration-normal) var(--ease-default);

  /* ========================================================================
     Z-INDEX — Thứ tự xếp chồng
     ======================================================================== */
  --z-behind:               -1;
  --z-default:              1;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-header:               300;
  --z-sidebar:              400;
  --z-overlay:              500;
  --z-modal:                600;
  --z-toast:                700;
  --z-tooltip:              800;
  --z-top:                  9999;

  /* ========================================================================
     CONTAINER — Chiều rộng khung chứa
     ======================================================================== */
  --container-xs:           20rem;      /* 320px */
  --container-sm:           24rem;      /* 384px */
  --container-md:           28rem;      /* 448px */
  --container-lg:           32rem;      /* 512px */
  --container-xl:           36rem;      /* 576px */
  --container-2xl:          42rem;      /* 672px */
  --container-3xl:          48rem;      /* 768px */
  --container-4xl:          56rem;      /* 896px */
  --container-5xl:          64rem;      /* 1024px */
  --container-6xl:          72rem;      /* 1152px */
  --container-7xl:          80rem;      /* 1280px */
  --container-max:          87.5rem;    /* 1400px */
  --container-padding:      clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ========================================================================
     ASPECT RATIO — Tỉ lệ khung hình
     ======================================================================== */
  --aspect-card:            4 / 3;
  --aspect-hero:            16 / 9;
  --aspect-square:          1 / 1;
  --aspect-portrait:        3 / 4;
  --aspect-wide:            21 / 9;

  /* ========================================================================
     KÍCH THƯỚC — Sizes
     ======================================================================== */
  --header-height:          4rem;       /* 64px */
  --header-height-mobile:   3.5rem;     /* 56px */
  --mobile-nav-height:      3.5rem;     /* 56px */
  --sidebar-width:          18rem;      /* 288px */
  --sidebar-width-collapsed:3.5rem;     /* 56px */
  --icon-sm:                1rem;       /* 16px */
  --icon-md:                1.25rem;    /* 20px */
  --icon-lg:                1.5rem;     /* 24px */
  --icon-xl:                2rem;       /* 32px */
}

/* ========================================================================
   DARK MODE — Chế độ tối (tùy chọn, chuẩn bị sẵn)
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #1A1A2E;
    --color-bg-secondary:   #22223B;
    --color-bg-tertiary:    #2D2D44;
    --color-bg-white:       #22223B;
    --color-bg-card:        #22223B;
    --color-bg-input:       #2D2D44;
    --color-bg-hover:       #2D2D44;
    --color-text:           #F0F0F0;
    --color-text-secondary: #A0A0B8;
    --color-text-tertiary:  #7A7A94;
    --color-text-heading:   #FFFFFF;
    --color-border:         #3D3D5C;
    --color-border-light:   #2D2D44;
    --color-border-dark:    #4D4D6A;
    --shadow-card:          0 2px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.15);
    --shadow-card-hover:    0 12px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}