/* ============================================
   AI Resume Builder — Design System Variables
   ============================================ */

:root {
  /* ── Colors: Light Sandal Theme ── */
  --bg-primary: #f8f5ee;
  --bg-secondary: #eee9dd;
  --bg-tertiary: #e3dccb;
  --bg-glass: rgba(0, 0, 0, 0.02);
  --bg-glass-hover: rgba(0, 0, 0, 0.04);
  --bg-glass-active: rgba(0, 0, 0, 0.06);

  /* ── Accent Colors (Light Green / Sage) ── */
  --accent-primary: #68b382;
  --accent-primary-rgb: 104, 179, 130;
  --accent-secondary: #58a171;
  --accent-tertiary: #488f60;
  --accent-gradient: linear-gradient(135deg, #68b382, #58a171, #488f60);
  --accent-gradient-hover: linear-gradient(135deg, #74bf8e, #63ae7c, #529d6c);
  --accent-glow: 0 0 30px rgba(104, 179, 130, 0.3);
  --accent-glow-strong: 0 0 60px rgba(104, 179, 130, 0.4);

  /* ── Text Colors (Dark on Light) ── */
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --text-muted: #a0aec0;
  --text-accent: #276749;

  /* ── Status Colors ── */
  --success: #38a169;
  --success-bg: rgba(56, 161, 105, 0.1);
  --warning: #dd6b20;
  --warning-bg: rgba(221, 107, 32, 0.1);
  --danger: #e53e3e;
  --danger-bg: rgba(229, 62, 62, 0.1);
  --info: #3182ce;
  --info-bg: rgba(49, 130, 206, 0.1);

  /* ── Border ── */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);
  --border-accent: rgba(104, 179, 130, 0.3);

  /* ── Typography ── */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

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

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows (Claymorphism) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);

  /* Clay Specific Shadows */
  --clay-bg: #eee9dd; /* Sandal background */
  --clay-shadow-out: 8px 8px 16px rgba(190, 180, 160, 0.6), -8px -8px 16px rgba(255, 255, 255, 0.8);
  --clay-shadow-in: inset 2px 2px 8px rgba(255, 255, 255, 0.8), inset -3px -3px 8px rgba(190, 180, 160, 0.4);
  --clay-shadow-pressed: inset 3px 3px 6px rgba(190, 180, 160, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  --clay-shadow-pressed-active: inset 4px 4px 8px rgba(190, 180, 160, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 1);
  --clay-shadow-out-hover: 12px 12px 20px rgba(190, 180, 160, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.9);
  --clay-shadow-in-hover: inset 3px 3px 10px rgba(255, 255, 255, 0.9), inset -4px -4px 10px rgba(190, 180, 160, 0.5);

  --clay-accent-bg: #68b382; /* Light Green */
  --clay-accent-shadow-out: 6px 6px 16px rgba(104, 179, 130, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.6);
  --clay-accent-shadow-in: inset 2px 2px 6px rgba(255, 255, 255, 0.5), inset -3px -3px 8px rgba(72, 143, 96, 0.6);
  --clay-accent-shadow-in-active: inset 4px 4px 10px rgba(72, 143, 96, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.3);

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 50;
  --z-tooltip: 100;
  --z-toast: 200;

  /* ── Layout ── */
  --max-width: 1400px;
  --sidebar-width: 480px;
  --header-height: 64px;
  --resume-width: 210mm;
  --resume-height: 297mm;
}