/**
 * ==============================================================================
 * iDesign Comprehensive Design Tokens (CSS Custom Properties)
 * Chuẩn hóa 1:1 tương thích với Tailwind CSS v4 / Next.js / Astro 6 & Theme Hiện tại
 * Nguồn tham chiếu: COMPONENT_FORENSIC_AUDIT.md & STAGE_1_CONTAINER_GRID_SPEC.md
 * ==============================================================================
 */

:root {
  /* --------------------------------------------------------------------------
   * 1. BRAND & SEMANTIC COLORS
   * -------------------------------------------------------------------------- */
  --id-color-primary: #FCC82D;
  --id-color-primary-hover: #E5B425;
  --id-color-primary-light: #FDE78A;
  
  --id-color-black: #000000;
  --id-color-dark-bg: #0D0D0E;
  --id-color-dark-surface: #111111;
  --id-color-card-dark: #18181B;
  
  --id-color-white: #FFFFFF;
  --id-color-surface-base: #FFFFFF;
  --id-color-surface-card: #FFFFFF;
  --id-color-surface-muted: #F8F8F9;
  
  --id-color-text-primary: #1A1A1A;
  --id-color-text-secondary: #666666;
  --id-color-text-muted: #888888;
  --id-color-text-inverse: #FFFFFF;
  
  --id-color-border-subtle: #EAEAEA;
  --id-color-border-dark: rgba(255, 255, 255, 0.08);
  --id-color-border-dark-hover: rgba(255, 255, 255, 0.16);
  --id-color-overlay-dark: rgba(0, 0, 0, 0.45);
  --id-color-overlay-heavy: rgba(0, 0, 0, 0.75);

  /* --------------------------------------------------------------------------
   * 2. TYPOGRAPHY SYSTEM
   * -------------------------------------------------------------------------- */
  --id-font-serif: 'Lora', Georgia, serif;
  --id-font-mono: 'Roboto Mono', monospace;
  --id-font-display: 'SpaceMono', monospace;
  --id-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --id-font-body: var(--id-font-sans);

  /* Font Sizes */
  --id-text-xs: 12px;
  --id-text-sm: 14px;
  --id-text-base: 16px;
  --id-text-lg: 19px;
  --id-text-xl: 24px;
  --id-text-2xl: 28px;
  --id-text-3xl: 36px;
  --id-text-4xl: 48px;

  /* Line Heights */
  --id-leading-tight: 1.25;
  --id-leading-normal: 1.5;
  --id-leading-relaxed: 1.75;

  /* Font Weights */
  --id-weight-normal: 400;
  --id-weight-medium: 500;
  --id-weight-semibold: 600;
  --id-weight-bold: 700;

  /* --------------------------------------------------------------------------
   * 3. LAYOUT, CONTAINERS & BREAKPOINTS (STAGE 1 SPEC)
   * -------------------------------------------------------------------------- */
  --id-container-shell-max: 1579px;
  --id-container-desktop: 1360px;
  --id-container-tablet: 768px;
  --id-container-mobile: 430px;

  /* Responsive Gutter to protect 108px Logo */
  --id-page-gutter-desktop: 2.15326%;
  --id-page-gutter-desktop-r: 4.30652%;
  --id-page-gutter-tablet: 20px;
  --id-page-gutter-mobile: 16px;
  
  --id-section-gap-desktop: 60px;
  --id-section-gap-mobile: 32px;
  --id-card-gap: 16px;

  /* Single Post Center Axis */
  --id-post-center-max-w: 56.42857rem;

  /* Component Dimensions (Strict Forensic Specs) */
  --id-header-height-dk: 75px;
  --id-header-height-mb: 56px;
  --id-logo-box-dk: 108px;
  --id-logo-box-mb: 56px;
  --id-banner-btn-min-w: 162px;
  --id-banner-btn-height: 52px;

  /* --------------------------------------------------------------------------
   * 4. SPACING SCALE (Base unit: 4px)
   * -------------------------------------------------------------------------- */
  --id-space-1: 4px;
  --id-space-2: 8px;
  --id-space-3: 12px;
  --id-space-4: 16px;
  --id-space-5: 20px;
  --id-space-6: 24px;
  --id-space-8: 32px;
  --id-space-10: 40px;
  --id-space-12: 48px;
  --id-space-16: 64px;

  /* --------------------------------------------------------------------------
   * 5. RADIUS & SHADOWS
   * -------------------------------------------------------------------------- */
  --id-radius-none: 0px;
  --id-radius-sm: 4px;
  --id-radius-md: 8px;
  --id-radius-lg: 12px;
  --id-radius-full: 9999px;

  --id-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --id-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --id-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.16);

  /* --------------------------------------------------------------------------
   * 6. TRANSITIONS & Z-INDEX
   * -------------------------------------------------------------------------- */
  --id-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --id-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --id-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --id-z-dropdown: 100;
  --id-z-sticky: 500;
  --id-z-header: 999;
  --id-z-drawer: 1000;
  --id-z-modal: 1100;
}

/* ==============================================================================
 * 7. UTILITY CONTAINER SHELL CLASS (.idesign-container)
 * ============================================================================== */
.idesign-container {
  width: 100%;
  max-width: var(--id-container-shell-max, 1579px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--id-page-gutter-desktop, 2.15326%);
  padding-right: var(--id-page-gutter-desktop-r, 4.30652%);
}

@media (max-width: 1024px) {
  .idesign-container {
    padding-left: var(--id-page-gutter-tablet, 20px);
    padding-right: var(--id-page-gutter-tablet, 20px);
  }
}

@media (max-width: 767.98px) {
  .idesign-container {
    padding-left: var(--id-page-gutter-mobile, 16px);
    padding-right: var(--id-page-gutter-mobile, 16px);
  }
}