/** * SaaDhaGaa Design System - Proportional Zoom Scaling * * Philosophy: adaptive across devices. --viewport-scale is computed against * the actual viewport width so phone, tablet, and desktop each use the room * available, while the proportions between elements stay constant. * * Scale reference (layout-controller.js): * ≤320px → 0.65x 480px → 0.85x 768px → 1.00x 1440px → 1.20x * Any viewport ≥ 1440px → 1.20x * * NOTE: --viewport-scale drives structural sizing (button heights, icon sizes, * spacer units) shared across all features. Page-specific layouts add their * own clamp() rules on top for fine-grained adaptiveness (e.g. player.css). */ :root { /* ===== PROPORTIONAL ZOOM FACTOR ===== */ /* Set by layout-controller.js — ramps from 0.65x (small phone) to 1.20x (desktop) */ --viewport-scale: 1; /* safe default until JS runs */ /* ===== 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 */ /* NOTE: --font-xs through --font-2xl are defined in style.css using clamp() — those take precedence. Only --font-2xs and --font-3xl are unique to the design system. */ --font-2xs: calc(10px * var(--viewport-scale)); --font-3xl: calc(48px * var(--viewport-scale)); /* ===== TYPOGRAPHY SCALE ===== 8 stops, Minor Third ratio (1.2). All font-size declarations across feature CSS should reference one of these tokens — never raw rem/px. */ --type-2xs: 0.694rem; /* ~11px — captions, badges */ --type-xs: 0.833rem; /* ~13px — labels, hints */ --type-sm: 0.875rem; /* 14px — secondary text */ --type-base: 1rem; /* 16px — body text */ --type-md: 1.125rem; /* 18px — card titles */ --type-lg: 1.25rem; /* 20px — section headers */ --type-xl: 1.5rem; /* 24px — page titles */ --type-2xl: 2rem; /* 32px — hero / brand */ /* ===== FONT FAMILIES ===== 2 stacks only. Every font-family declaration should use one of these. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace; /* 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 */ /* NOTE: --radius-sm through --radius-xl are defined in style.css using clamp() — those take precedence. Only --radius-full is unique to the design system. */ --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 */ /* ===== CANONICAL BUTTON SCALE ===== All button components across features should converge on these tokens. Three sizes: sm (secondary/inline), md (standard actions), lg (primary CTA). */ --btn-padding-sm: 0.5rem 0.875rem; --btn-padding-md: 0.75rem 1.25rem; --btn-padding-lg: 1rem 1.5rem; --btn-radius: 10px; /* rectangular buttons */ --btn-radius-pill: 9999px; /* pill-shaped buttons */ --btn-min-height-sm: 36px; --btn-min-height-md: 44px; /* accessibility minimum */ --btn-min-height-lg: 50px; /* ===== SHADOW ELEVATION SYSTEM ===== 5 semantic levels. Every box-shadow should reference one of these. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 20px var(--btn-primary-shadow, rgba(0, 0, 0, 0.20)); /* ===== MOTION TOKENS ===== 3 semantic durations + 2 easing curves. All transitions should use these. */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ===== LETTER-SPACING ===== 3 semantic values. Replaces 21 ad-hoc values across feature CSS. */ --tracking-tight: -0.01em; /* large headings */ --tracking-normal: 0; /* body text (default) */ --tracking-wide: 0.05em; /* uppercase labels */ /* ===== BREAKPOINT CONVENTIONS ===== CSS custom properties can't be used in @media queries, but these document the canonical thresholds all feature CSS should use consistently. */ /* --bp-xs: 360px; extra-small phones */ /* --bp-sm: 480px; standard phone / card container width */ /* --bp-md: 768px; tablet */ /* --bp-lg: 1024px; desktop */ /* 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); } /* ===== FOCUS INDICATOR (accessibility) ===== Visible focus ring for keyboard users, invisible for mouse/touch. */ :focus-visible { outline: 2px solid var(--accent-1, #D4AF37); outline-offset: 2px; } /* Suppress default outline for mouse clicks (focus-visible handles keyboard) */ :focus:not(:focus-visible) { outline: none; } /* ===== REDUCED MOTION (accessibility) ===== Respects user's OS-level motion preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }