/**
 * ViViDio Connect — CENTRAL DESIGN (Single Source)
 * Material Design 2.0 • Vivid Purple, Hot Pink, Teal, Royal Blue
 * Canonical location: common/theme/
 * See repo root: CENTRAL-DESIGN.md
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

:root {
  --color-primary: #9C27B0;
  --color-primary-light: #BA68C8;
  --color-primary-dark: #7B1FA2;
  --color-accent: #E91E63;
  --color-accent-light: #F06292;
  --color-accent-dark: #C2185B;
  --gradient-primary: linear-gradient(135deg, #9C27B0, #E91E63);
  --gradient-primary-hover: linear-gradient(135deg, #7B1FA2, #C2185B);
  --color-teal: #128C7E;
  --color-teal-light: #25D366;
  --color-success: #25D366;
  --color-success-dark: #128C7E;
  --color-amber: #FFC107;
  --color-amber-light: #FFD54F;
  --color-cyan: #00BCD4;
  --color-royal-blue: #0D47A1;
  --color-royal-blue-light: #1565C0;
  --color-white: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-text: #333333;
  --color-text-secondary: #616161;
  --color-text-muted: #9E9E9E;
  --bg-base: #F5F5F5;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-nav: #FFFFFF;
  --bg-footer: #020617;
  --font-family: 'Roboto', 'Open Sans', 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  /* Fluid typography: screen size ke saath proportion mein (mobile + desktop dono) */
  --text-xs: clamp(0.65rem, 0.8vw + 0.55rem, 0.75rem);
  --text-sm: clamp(0.75rem, 1vw + 0.6rem, 0.875rem);
  --text-base: clamp(0.875rem, 1.2vw + 0.7rem, 1rem);
  --text-lg: clamp(1rem, 1.2vw + 0.75rem, 1.125rem);
  --text-xl: clamp(1.0625rem, 1.5vw + 0.8rem, 1.25rem);
  --text-2xl: clamp(1.25rem, 2vw + 0.9rem, 1.5rem);
  --text-3xl: clamp(1.5rem, 2.5vw + 1rem, 1.875rem);
  --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;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.2);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  /* Fluid layout: screen ke saath header/footer/body scale (chhoti screen = chhota header) */
  --header-height: clamp(2.75rem, 5vw + 2.25rem, 4rem);
  --footer-padding-y: clamp(1rem, 3vw + 0.5rem, 2rem);
  --footer-padding-x: clamp(0.5rem, 2vw + 0.25rem, 1rem);
  --main-padding-x: clamp(0.5rem, 2vw + 0.5rem, 1.5rem);
  --main-padding-y: clamp(0.75rem, 2vw + 0.5rem, 1.5rem);
  --gold: var(--color-primary);
  --gold-100: rgba(156, 39, 176, 0.1);
  --bg-surface-hover: var(--color-gray-200);
  --bg-secondary: var(--color-gray-100);
  --bg-radial: var(--bg-base);
  --text-primary: var(--color-text);
  --text-inverse: var(--color-white);
  --border-gold: var(--color-gray-300);
  --border-subtle: var(--color-gray-200);
  --glass-blur: blur(12px);
  --glass-bg: rgba(255, 255, 255, 0.9);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Fluid root: screen chhoti/badi dono par font size scale (min 13px, max 18px) */
html { font-size: clamp(13px, 1.8vw + 10px, 18px); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-family); font-weight: var(--font-weight-regular); font-size: inherit; color: var(--color-text); background-color: var(--bg-base); line-height: 1.5; min-height: 100vh; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); color: var(--color-text); line-height: 1.3; }
h1 { font-size: clamp(1.5rem, 4vw + 1rem, var(--text-3xl)); } h2 { font-size: clamp(1.25rem, 3vw + 0.5rem, var(--text-2xl)); } h3 { font-size: clamp(1.125rem, 2vw + 0.5rem, var(--text-xl)); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

.vvc-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); transition: box-shadow var(--transition); }
.vvc-card:hover { box-shadow: var(--shadow-card-hover); }
.vvc-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-3); }

.vvc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-family); font-weight: var(--font-weight-bold); font-size: clamp(0.9rem, 1.2vw + 0.8rem, 1.2rem); padding: var(--space-2) var(--space-5); border: none; border-radius: var(--radius-md); cursor: pointer; transition: opacity var(--transition), transform var(--transition); }
.vvc-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vvc-btn-primary { background: var(--gradient-primary); color: var(--color-white); box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3); }
.vvc-btn-primary:hover:not(:disabled) { background: var(--gradient-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(156, 39, 176, 0.35); }
.vvc-btn-teal { background: var(--color-teal); color: var(--color-white); }
.vvc-btn-teal:hover:not(:disabled) { background: var(--color-success-dark); }
.vvc-btn-success { background: var(--color-success); color: var(--color-white); }
.vvc-btn-secondary { background: var(--color-gray-200); color: var(--color-text); }
.vvc-btn-secondary:hover:not(:disabled) { background: var(--color-gray-300); }
.vvc-btn-gold { background: #fbbf24; color: #0f172a; }
.vvc-btn-gold:hover:not(:disabled) { background: #1e3a8a; color: #e0e7ff; }

/* Button IDs (vvc-btn-1 … vvc-btn-7) */
.vvc-btn-1 { background: var(--gradient-primary); color: var(--color-white); box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3); }
.vvc-btn-1:hover:not(:disabled) { background: var(--gradient-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(156, 39, 176, 0.35); }
.vvc-btn-2 { background: #fbbf24; color: #0f172a; }
.vvc-btn-2:hover:not(:disabled) { background: #1e3a8a; color: #e0e7ff; }
.vvc-btn-3 { background: var(--color-success); color: #0f172a; }
.vvc-btn-3:hover:not(:disabled) { background: #16a34a; color: #0f172a; }
.vvc-btn-4 { background: var(--color-gray-200); color: var(--color-text); }
.vvc-btn-4:hover:not(:disabled) { background: var(--color-gray-300); }
.vvc-btn-5 { background: var(--gradient-primary); color: var(--color-white); }
.vvc-btn-5:hover:not(:disabled) { background: var(--gradient-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(156, 39, 176, 0.35); }
.vvc-btn-6 { background: rgba(15, 23, 42, 0.85); color: #FEF3C7; font-weight: 700; letter-spacing: 0.05em; }
.vvc-btn-6:hover:not(:disabled) { color: #fbbf24; background: rgba(30, 41, 59, 0.95); }
.vvc-btn-7 { background: transparent; color: #94a3b8; border: 1px solid rgba(255,255,255,0.15); }
.vvc-btn-7:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: #f8fafc; }

.vvc-navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--bg-nav); box-shadow: var(--shadow-nav); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--main-padding-x); z-index: var(--z-nav); }
.vvc-navbar-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: var(--text-lg); }
.vvc-navbar-brand img { height: clamp(1.5rem, 4vw + 1rem, 2.25rem); width: auto; }
.vvc-navbar-actions { display: flex; align-items: center; gap: var(--space-2); }

.vvc-input, .vvc-select, .vvc-textarea { width: 100%; font-family: var(--font-family); font-size: var(--text-base); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-white); transition: border-color var(--transition), box-shadow var(--transition); }
.vvc-input:focus, .vvc-select:focus, .vvc-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.15); }
.vvc-label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-1); }

.vvc-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--main-padding-x); }
.vvc-main { padding-top: var(--header-height); min-height: 100vh; padding-bottom: var(--space-8); padding-left: var(--main-padding-x); padding-right: var(--main-padding-x); }
.vvc-hidden { display: none !important; }
.vvc-text-primary { color: var(--color-primary); }
.vvc-text-success { color: var(--color-success); }
.vvc-bg-surface { background: var(--bg-surface); }

/* Improved fluid heading scale and header/footer typography
   - Ensures headings, header and footer scale with viewport while avoiding unwanted wrapping
   - Use these clamps to prevent overflow; fallback remains accessible
*/
:root {
  --h1-min: 1.4rem; /* ~22px at base */
  --h1-max: 3.2rem; /* ~51px */
  --h2-min: 1.15rem;
  --h2-max: 2.4rem;
  --h3-min: 1rem;
  --h3-max: 1.6rem;
}

/* Modular scale for headings (fluid, avoids wrapping by shrinking on small viewports) */
h1 { font-size: clamp(var(--h1-min), calc(1.6rem + 3.2vw), var(--h1-max)); letter-spacing: -0.02em; }
h2 { font-size: clamp(var(--h2-min), calc(1.25rem + 2.4vw), var(--h2-max)); }
h3 { font-size: clamp(var(--h3-min), calc(1.05rem + 1.6vw), var(--h3-max)); }
h4 { font-size: clamp(0.95rem, 1rem + 1.0vw, 1.1rem); }
h5 { font-size: clamp(0.9rem, 0.95rem + 0.6vw, 1rem); }
h6 { font-size: clamp(0.85rem, 0.9rem + 0.4vw, 0.95rem); }

/* Header / Footer: scale typography and spacing with viewport */
.vvc-header, .vvc-navbar { font-size: clamp(0.95rem, 0.9rem + 0.8vw, 1.2rem); height: var(--header-height); }
.vvc-footer { font-size: clamp(0.9rem, 0.9rem + 0.6vw, 1.05rem); padding: var(--footer-padding-y) var(--footer-padding-x); }

/* Prevent small components from wrapping mid-word; prefer ellipsis for overflow */
.vvc-no-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Utility: responsive text container that prevents abrupt wrapping
   Use sparingly for headings in narrow containers */
.vvc-responsive-heading { display: block; max-width: 100%; word-break: normal; }

/* Accessibility guard: ensure minimum readable size on smallest devices */
@media (max-width: 360px) {
  html { font-size: clamp(13px, 1.6vw + 9px, 15px); }
}