/* ==========================================================================
   CSS Variables (Design Token) - Sleek & Bento Theme
   ========================================================================== */

:root {
   /* Colors - Light Theme (Ultra Minimal) */
   --color-bg-light: #f8fafc;
   /* Very soft off-white canvas */
   --color-bg-white: #ffffff;
   /* Pure white for sleek surfaces */
   --color-text-dark: #0f172a;
   /* Near black for maximum contrast */
   --color-text-muted: #64748b;
   /* Sleek slate for secondary text */
   --color-accent-blue: #000000;
   /* Stark black accent for ultra-premium feel (Apple style) */
   --color-accent-blue-hover: #334155;
   --color-accent-green: #10b981;
   --color-border: rgba(0, 0, 0, 0.06);
   /* Nearly invisible, sharp borders */

   /* Typography */
   /* Using Inter for that sharp, dynamic, developer-focused look. 
     Playfair is kept for extremely specific elegant nodes if needed, but mostly Sans */
   --font-heading: 'Inter', sans-serif;
   --font-body: 'Inter', sans-serif;
   --font-serif: 'Playfair Display', serif;
   /* Reserve for special elegant labels */

   /* Font Sizes - Adjusted for sleekness */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 2.5rem;
   /* 40px */
   --text-5xl: 3.5rem;
   /* 56px - massive hero headers */
   --text-6xl: 4.5rem;
   /* 72px */

   /* Spacing - Tightened slightly for better Bento density */
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-24: 6rem;
   /* 96px */

   /* Shadows - Extremely diffuse, soft, expensive-feeling */
   --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
   --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.02);
   --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.03);
   --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.04);
   --shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.06);
   --shadow-glow: 0 0 40px rgba(10, 10, 10, 0.08);
   /* For active bento items */

   /* Border Radius - Massive radii for the Bento Box look */
   --radius-sm: 0.5rem;
   /* 8px */
   --radius-md: 0.75rem;
   /* 12px */
   --radius-lg: 1rem;
   /* 16px */
   --radius-xl: 1.5rem;
   /* 24px - Standard Bento */
   --radius-2xl: 2.5rem;
   /* 40px - Ultra sleek curves */
   --radius-full: 9999px;
   /* Pills */

   /* Transitions - Apple-like spring/smooth feels */
   --transition-fast: 300ms cubic-bezier(0.16, 1, 0.3, 1);
   --transition-normal: 500ms cubic-bezier(0.16, 1, 0.3, 1);
   --transition-slow: 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   CSS Variables (Design Token) - Dark Theme (Cyber/Premium)
   ========================================================================== */
[data-theme="dark"] {
   --color-bg-light: #000000;
   /* Pure black canvas */
   --color-bg-white: #0a0a0a;
   /* Extremely dark grey for surfaces */
   --color-text-dark: #fafafa;
   /* Pure white text */
   --color-text-muted: #a1a1aa;
   /* Crisp silver */
   --color-accent-blue: #ffffff;
   /* White accent on black */
   --color-accent-blue-hover: #d4d4d8;
   --color-accent-green: #34d399;
   --color-border: rgba(255, 255, 255, 0.08);
   /* Crisp, thin white borders */

   /* Reverse shadows - mostly using glows in dark mode */
   --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.8);
   --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.9);
   --shadow-lg: 0 20px 48px rgba(0, 0, 0, 1);
   --shadow-xl: 0 32px 64px rgba(0, 0, 0, 1);
   --shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.8);
   --shadow-glow: 0 0 50px rgba(255, 255, 255, 0.08);
   /* Sophisticated white glow */
}