/**
 * SaaDhaGaa Design System - Proportional Zoom Scaling
 * 
 * Philosophy:
 * - All sizing relative to BASE viewport scale
 * - Layout structure NEVER changes (no repositioning)
 * - Only visual size scales (like browser zoom)
 * - Same position, same structure, different size
 * 
 * This creates a "zoom factor" effect rather than responsive layout.
 */

:root {
  /* ===== PROPORTIONAL ZOOM FACTOR ===== */
  /* This is the ONLY variable that changes - everything else is derived */
  /* Desktop (1920px): 1.0x, Tablet (768px): 0.8x, Mobile (375px): 0.6x */
  --viewport-scale: 1;  /* JavaScript in layout-controller.js will set this */
  
  /* ===== BASE DIMENSIONS (at 1.0x scale) ===== */
  /* These are the "design canvas" sizes - they DON'T change */
  --base-font-size: 16px;
  --base-button-height: 80px;
  --base-input-height: 56px;
  --base-header-height: 60px;
  --base-spacing: 16px;
  
  /* ===== SCALED VALUES (multiply base × scale) ===== */
  /* These DO change but positions remain the same */
  --space-xs: calc(var(--base-spacing) * 0.25 * var(--viewport-scale));
  --space-sm: calc(var(--base-spacing) * 0.5 * var(--viewport-scale));
  --space-md: calc(var(--base-spacing) * 1 * var(--viewport-scale));
  --space-lg: calc(var(--base-spacing) * 1.5 * var(--viewport-scale));
  --space-xl: calc(var(--base-spacing) * 2 * var(--viewport-scale));
  --space-2xl: calc(var(--base-spacing) * 2.5 * var(--viewport-scale));
  
  --button-height-sm: calc(50px * var(--viewport-scale));
  --button-height-md: calc(60px * var(--viewport-scale));
  --button-height-lg: calc(80px * var(--viewport-scale));
  
  --input-height: calc(56px * var(--viewport-scale));
  --header-height: calc(60px * var(--viewport-scale));
  --footer-height: calc(70px * var(--viewport-scale));
  
  /* Typography - all relative to scaled base */
  --font-2xs: calc(10px * var(--viewport-scale));
  --font-xs: calc(12px * var(--viewport-scale));
  --font-sm: calc(14px * var(--viewport-scale));
  --font-base: calc(16px * var(--viewport-scale));
  --font-md: calc(18px * var(--viewport-scale));
  --font-lg: calc(20px * var(--viewport-scale));
  --font-xl: calc(24px * var(--viewport-scale));
  --font-2xl: calc(32px * var(--viewport-scale));
  --font-3xl: calc(48px * var(--viewport-scale));
  
  /* Icon sizes */
  --icon-sm: calc(16px * var(--viewport-scale));
  --icon-md: calc(24px * var(--viewport-scale));
  --icon-lg: calc(32px * var(--viewport-scale));
  
  /* Border radius */
  --radius-sm: calc(4px * var(--viewport-scale));
  --radius-md: calc(6px * var(--viewport-scale));
  --radius-lg: calc(8px * var(--viewport-scale));
  --radius-xl: calc(12px * var(--viewport-scale));
  --radius-full: 9999px;
  
  /* Layout constraints - use viewport-relative sizing for centering */
  --content-max-width: 90vw;
  --content-narrow: 85vw;
  --touch-target-min: 44px; /* Accessibility minimum, never scale below this */
  
  /* Line heights - unitless, don't scale */
  --line-tight: 1.1;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.75;
}

/* ===== APPLY FLUID BASE FONT ===== */
html {
  /* This will be overridden by layout-controller.js for precise control */
  font-size: var(--fluid-base-font);
  
  /* Ensure smooth font scaling */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--font-base);
  line-height: var(--line-normal);
}

/* ===== UTILITY CLASSES ===== */

/* Typography utilities */
.text-2xs { font-size: var(--font-2xs); }
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }

/* Spacing utilities */
.space-xs { margin: var(--space-xs); }
.space-sm { margin: var(--space-sm); }
.space-md { margin: var(--space-md); }
.space-lg { margin: var(--space-lg); }
.space-xl { margin: var(--space-xl); }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Touch target enforcement (accessibility) */
.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}