/* 
  ABANGADEKGANTENG - variables.css
  Sistem variabel CSS modern untuk tema slate-glassmorphism premium,
  tipografi adaptif dengan clamp(), dan transisi yang halus.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Font Families */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Color Palette - Premium Light Slate */
  --bg-primary: #f8fafc;        /* Soft warm off-white slate */
  --bg-secondary: #f1f5f9;      /* Light gray slate background */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.05), 
                   0 1px 2px 0 rgba(15, 23, 42, 0.02);
  
  --text-primary: #0f172a;      /* Deep charcoal */
  --text-secondary: #475569;    /* Medium slate gray */
  --text-muted: #64748b;        /* Muted slate */
  
  --accent-primary: #4f46e5;    /* Vibrant Indigo */
  --accent-hover: #4338ca;      /* Deep Indigo */
  --accent-light: #e0e7ff;      /* Indigo tint */
  --accent-glow: rgba(79, 70, 229, 0.15);

  --success: #10b981;           /* Emerald green */
  --error: #ef4444;             /* Crimson red */

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  --border-light: 1px solid rgba(15, 23, 42, 0.08);
  --border-focus: 2px solid var(--accent-primary);

  /* Font Sizes - Responsive Scaling using clamp() */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);
  --fs-display: clamp(2rem, 1.7rem + 1.5vw, 3rem);

  /* Layout Constants */
  --max-width: 640px;           /* Mobile & Tablet optimized focus width */
  --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-ripple: 600ms cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Dark Mode Preferences Support (Optional, matches system theme for high usability) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #090d16;
    --bg-secondary: #0f172a;
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    --accent-light: #1e1b4b;
    --border-light: 1px solid rgba(255, 255, 255, 0.08);
  }
}