/* =============================================================================
   VizachiAI — Design System Tokens: Black Diamond, 24K Gold & Cream Luxury
   (variables.css)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── 1. Background Palettes (Warm Cream / Ivory / Eye-Friendly) ── */
  --bg-main: #F9F7F4;          /* Asosiy ko'zni og'ritmaydigan qaymoqrang (Cream Alabaster) */
  --bg-cream-soft: #F4EFEA;    /* Yumshoq qaymoqrang fon */
  --bg-cream-subtle: #FAF8F5;  /* O'ta nafis oqimtir qaymoqrang */
  --bg-card: #FFFFFF;          /* Sof oq karta va bloklar foni */
  --bg-surface: #F0EAE1;       /* Ichki konteynerlar va elementlar foni */
  --bg-surface-hover: #E8DFD3; /* Hover holatidagi fon */
  --bg-surface-elevated: #EDE6DC;

  /* ── 2. Black Diamond Obsidian (Deep Crystal Black from image #080824) ── */
  --diamond-black: #080824;    /* Asosiy Black Diamond qora */
  --diamond-dark: #040412;     /* Chuqur obsidian qora */
  --diamond-charcoal: #0F101C; /* Yumshoq qora */
  --diamond-slate: #1C1E2E;    /* Kulrang-qora obsidian */

  /* ── 3. 24K Champagne & White Gold Trim Accents ── */
  --gold-primary: #C5A880;     /* 24K Champagne Gold asosiy */
  --gold-light: #DFCCA8;       /* Och tilla/qaymoq rang */
  --gold-dark: #9A7E56;        /* To'q oltin bronza */
  --gold-bronze: #876C44;      /* Chuqur antik oltin */
  --gold-muted: rgba(197, 168, 128, 0.15); /* Yengil oltin tuman */

  /* ── 4. Status Colors (Refined & Elegant) ── */
  --primary: #080824;          /* Primary harakatlar Black Diamond */
  --primary-light: #1E2138;
  --secondary: #0D9488;        /* Emerald Teal */
  --accent: #C5A880;           /* Oltin aksent */
  
  --success: #059669;          /* Yashil muvaffaqiyat */
  --warning: #D97706;          /* Oltin sariq ogohlantirish */
  --error: #DC2626;            /* Nafis qizil */
  --info: #2563EB;             /* Ko'k axborot */

  /* ── 5. Typography Colors (Yuqori kontrast va o'qilish osonligi) ── */
  --text-primary: #0A0B14;     /* To'liq aniq Black Diamond matn */
  --text-secondary: #474A59;   /* Yumshoq grafit matn */
  --text-muted: #797E91;       /* Yordamchi/Kuchsiz matn */
  --text-inverse: #FFFFFF;     /* Qora bloklar ustidagi oq yozuv */
  --text-gold: #9A7E56;        /* Oltin yozuvlar */

  /* ── 6. Gradients & Luxury Textures ── */
  --gradient-gold: linear-gradient(135deg, #DFCCA8 0%, #C5A880 50%, #9A7E56 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(223, 204, 168, 0.2) 0%, rgba(197, 168, 128, 0.1) 100%);
  --gradient-diamond: linear-gradient(135deg, #1C1E2E 0%, #080824 50%, #040412 100%);
  --gradient-diamond-glass: linear-gradient(135deg, rgba(8, 8, 36, 0.94) 0%, rgba(4, 4, 18, 0.98) 100%);
  --gradient-hero-cream: linear-gradient(180deg, #FBF9F6 0%, #F4EFEA 60%, #EFE8DE 100%);
  --gradient-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  --gradient-badge-gold: linear-gradient(135deg, #FFF9F0 0%, #F5EAD7 100%);

  /* ── 7. Glassmorphism & Gold Borders ── */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(197, 168, 128, 0.25);
  --border-gold-subtle: 1px solid rgba(197, 168, 128, 0.28);
  --border-gold-solid: 1px solid #C5A880;
  --border-card: 1px solid rgba(8, 8, 36, 0.08);
  --border-glass: 1px solid rgba(197, 168, 128, 0.25);

  /* ── 8. Effects & Soft Luxury Shadows ── */
  --backdrop-blur: blur(16px);
  --shadow-sm: 0 2px 4px rgba(8, 8, 36, 0.04);
  --shadow-md: 0 8px 16px -2px rgba(8, 8, 36, 0.06), 0 3px 6px -1px rgba(8, 8, 36, 0.03);
  --shadow-lg: 0 16px 32px -4px rgba(8, 8, 36, 0.08), 0 6px 12px -2px rgba(8, 8, 36, 0.04);
  --shadow-card: 0 12px 30px -8px rgba(8, 8, 36, 0.07), 0 4px 10px rgba(197, 168, 128, 0.05);
  --shadow-card-hover: 0 24px 48px -12px rgba(8, 8, 36, 0.12), 0 0 24px rgba(197, 168, 128, 0.25);
  --shadow-glow-gold: 0 0 25px rgba(197, 168, 128, 0.4);
  --shadow-glow-diamond: 0 10px 25px rgba(8, 8, 36, 0.35);

  /* ── 9. Typography Scales & Font Families ── */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 52px;
  --text-6xl: 64px;
  
  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* ── 10. Border Radii ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── 11. Spacing Scale (4px System) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── 12. Transitions & Animations ── */
  --transition-default: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.18s ease-in-out;
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}