funuicss 3.6.17 → 3.6.19

package/css/fun.css

@@ -208,7 +208,7 @@
   --snackBarZindex:20;
   --notificationZindex:29;
   --inputButtonHeight:2.4rem;
-  --inputPadding:0.5rem 0;
+  --inputPadding:1rem;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
   --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3);
@@ -218,127 +218,611 @@
 
 }
 
-
-
 :root {
-  /* BUTTON VARIABLES */
-  --btn-font-size: var(--text-base);
-  --btn-font-weight: 500;
-  --btn-padding-x: var(--space-4);
-  --btn-padding-y: var(--space-2);
-  --btn-border-radius: var(--radius-lg);
-  --btn-border-width: 1px;
-  --btn-min-height: 2.5rem;
-  --btn-gap: var(--space-2); /* for icon spacing */
-  
-  /* Button States */
-  --btn-hover-scale: 1.02;
-  --btn-active-scale: 0.98;
-  --btn-disabled-opacity: 0.5;
+  /* ===== Base Font Sizes ===== */
+  --font-size-smaller: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-h6: 1rem;
+  --font-size-h5: 1.25rem;
+  --font-size-h4: 1.5rem;
+  --font-size-h3: 1.75rem;
+  --font-size-h2: 2rem;
+  --font-size-h1: 2.5rem;
+  --font-size-big: 3rem;
+  --font-size-bigger: 3.5rem;
+  --font-size-jumbo: 4rem;
+
+  /* ===== Text Scale (for utility classes) ===== */
+  --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;
+  --text-8xl: 6rem;
+  --text-9xl: 8rem;
+  --text-10xl: 10rem;
+
+  /* ===== Base Line Heights ===== */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.8;
+
+  /* Element-specific line heights */
+  --line-height-smaller: var(--line-height-loose);
+  --line-height-small: var(--line-height-relaxed);
+  --line-height-body: var(--line-height-normal);
+  --line-height-big: var(--line-height-tight);
+  --line-height-bigger: var(--line-height-tight);
+  --line-height-h6: var(--line-height-normal);
+  --line-height-h5: var(--line-height-normal);
+  --line-height-h4: var(--line-height-normal);
+  --line-height-h3: var(--line-height-snug);
+  --line-height-h2: var(--line-height-snug);
+  --line-height-h1: var(--line-height-tight);
+  --line-height-jumbo: var(--line-height-tight);
+
+  /* ===== Leading Scale (for utility classes) ===== */
+  --leading-xs: var(--line-height-loose);
+  --leading-sm: var(--line-height-relaxed);
+  --leading-base: var(--line-height-normal);
+  --leading-lg: var(--line-height-normal);
+  --leading-xl: var(--line-height-normal);
+  --leading-2xl: var(--line-height-normal);
+  --leading-3xl: var(--line-height-snug);
+  --leading-4xl: var(--line-height-snug);
+  --leading-5xl: var(--line-height-tight);
+  --leading-6xl: var(--line-height-tight);
+  --leading-7xl: var(--line-height-tight);
+  --leading-8xl: var(--line-height-tight);
+  --leading-9xl: 1;
+  --leading-10xl: 1;
+
+  /* ===== Responsive Scaling Factors ===== */
+  --scale-mobile: 1;
+  --scale-tablet: 1.1;
+  --scale-desktop: 1.2;
+  --scale-large-desktop: 1.3;
+
+  /* ===== Responsive Font Size Variables ===== */
+  /* Headings */
+  --font-size-h1-responsive: var(--font-size-h1);
+  --font-size-h2-responsive: var(--font-size-h2);
+  --font-size-h3-responsive: var(--font-size-h3);
+  --font-size-h4-responsive: var(--font-size-h4);
+  --font-size-h5-responsive: var(--font-size-h5);
+  --font-size-h6-responsive: var(--font-size-h6);
   
-  /* Button Variants */
-  --btn-primary-bg: var(--primary);
-  --btn-primary-text: var(--white);
-  --btn-primary-hover: var(--primary600);
+  /* Special sizes */
+  --font-size-big-responsive: var(--font-size-big);
+  --font-size-bigger-responsive: var(--font-size-bigger);
+  --font-size-jumbo-responsive: var(--font-size-jumbo);
   
-  --btn-secondary-bg: var(--secondary);
-  --btn-secondary-text: var(--white);
-  --btn-secondary-hover: var(--secondary600);
+  /* Text utilities */
+  --text-xs-responsive: var(--text-xs);
+  --text-sm-responsive: var(--text-sm);
+  --text-base-responsive: var(--text-base);
+  --text-lg-responsive: var(--text-lg);
+  --text-xl-responsive: var(--text-xl);
+  --text-2xl-responsive: var(--text-2xl);
+  --text-3xl-responsive: var(--text-3xl);
+  --text-4xl-responsive: var(--text-4xl);
+  --text-5xl-responsive: var(--text-5xl);
+  --text-6xl-responsive: var(--text-6xl);
+  --text-7xl-responsive: var(--text-7xl);
+  --text-8xl-responsive: var(--text-8xl);
+  --text-9xl-responsive: var(--text-9xl);
+  --text-10xl-responsive: var(--text-10xl);
+
+  /* ===== Responsive Line Height Variables ===== */
+  /* Headings */
+  --line-height-h1-responsive: var(--line-height-h1);
+  --line-height-h2-responsive: var(--line-height-h2);
+  --line-height-h3-responsive: var(--line-height-h3);
+  --line-height-h4-responsive: var(--line-height-h4);
+  --line-height-h5-responsive: var(--line-height-h5);
+  --line-height-h6-responsive: var(--line-height-h6);
   
-  --btn-outlined-border: var(--primary);
-  --btn-outlined-text: var(--primary);
-  --btn-outlined-hover-bg: var(--primary50);
-
-  /* INPUT VARIABLES */
-  --input-font-size: var(--text-base);
-  --input-padding-x: var(--space-4);
-  --input-padding-y: var(--space-3);
-  --input-border-radius: var(--radius-lg);
-  --input-border-width: var(--inputBorder);
-  --input-border-color: var(--borderColor);
-  --input-bg: var(--white);
-  --input-text-color: var(--text-color);
-  --input-placeholder-color: var(--muted);
-  --input-min-height: var(--inputButtonHeight);
+  /* Special sizes */
+  --line-height-big-responsive: var(--line-height-big);
+  --line-height-bigger-responsive: var(--line-height-bigger);
+  --line-height-jumbo-responsive: var(--line-height-jumbo);
   
-  /* Input States */
-  --input-focus-border: var(--primary);
-  --input-focus-ring: 0 0 0 3px var(--primary200);
-  --input-error-border: var(--error);
-  --input-error-ring: 0 0 0 3px var(--error200);
-  --input-disabled-bg: var(--lighter);
-  --input-disabled-opacity: 0.6;
-
-  /* CARD VARIABLES */
-  --card-bg: var(--cardBg);
-  --card-border: var(--border);
-  --card-border-radius: var(--borderRadius);
-  --card-padding: var(--space-6);
-  --card-shadow: var(--card);
-  --card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-
-  /* LINK VARIABLES */
-  --link-color: var(--linkColor);
-  --link-hover-color: var(--primary);
-  --link-underline: none;
-  --link-hover-underline: underline;
-  --link-font-weight: 400;
-
-  /* BADGE/TAG VARIABLES */
-  --badge-font-size: var(--text-xs);
-  --badge-padding-x: var(--space-2);
-  --badge-padding-y: var(--space-1);
-  --badge-border-radius: var(--radius-full);
-  --badge-font-weight: 500;
-
-  /* MODAL/DIALOG VARIABLES */
-  --modal-backdrop: rgba(0, 0, 0, 0.5);
-  --modal-bg: var(--white);
-  --modal-border-radius: var(--radius-2xl);
-  --modal-padding: var(--space-8);
-  --modal-max-width: 32rem;
-  --modal-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
-
-  /* DROPDOWN/SELECT VARIABLES */
-  --dropdown-bg: var(--white);
-  --dropdown-border: var(--border);
-  --dropdown-border-radius: var(--radius-lg);
-  --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-  --dropdown-item-padding: var(--space-3) var(--space-4);
-  --dropdown-item-hover-bg: var(--lighter);
-
-  /* SWITCH/TOGGLE VARIABLES */
-  --switch-width: 2.75rem;
-  --switch-height: 1.5rem;
-  --switch-bg: var(--borderColor);
-  --switch-active-bg: var(--primary);
-  --switch-thumb-size: 1.25rem;
-
-  /* CHECKBOX/RADIO VARIABLES */
-  --checkbox-size: 1.25rem;
-  --checkbox-border: var(--borderColor);
-  --checkbox-checked-bg: var(--primary);
-  --checkbox-checked-border: var(--primary);
-  --checkbox-border-radius: var(--radius);
-
-  /* TOOLTIP VARIABLES */
-  --tooltip-bg: var(--dark);
-  --tooltip-text: var(--white);
-  --tooltip-padding: var(--space-2) var(--space-3);
-  --tooltip-border-radius: var(--radius);
-  --tooltip-font-size: var(--text-sm);
-
-  /* AVATAR VARIABLES */
-  --avatar-size: 2.5rem;
-  --avatar-border-radius: var(--radius-full);
-  --avatar-border: 2px solid var(--white);
-
-  /* DIVIDER VARIABLES */
-  --divider-color: var(--borderColor);
-  --divider-width: 1px;
-  --divider-margin: var(--space-4) 0;
+  /* Text utilities */
+  --leading-xs-responsive: var(--leading-xs);
+  --leading-sm-responsive: var(--leading-sm);
+  --leading-base-responsive: var(--leading-base);
+  --leading-lg-responsive: var(--leading-lg);
+  --leading-xl-responsive: var(--leading-xl);
+  --leading-2xl-responsive: var(--leading-2xl);
+  --leading-3xl-responsive: var(--leading-3xl);
+  --leading-4xl-responsive: var(--leading-4xl);
+  --leading-5xl-responsive: var(--leading-5xl);
+  --leading-6xl-responsive: var(--leading-6xl);
+  --leading-7xl-responsive: var(--leading-7xl);
+  --leading-8xl-responsive: var(--leading-8xl);
+  --leading-9xl-responsive: var(--leading-9xl);
+  --leading-10xl-responsive: var(--leading-10xl);
+
+  /* ===== Font Weights ===== */
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extra-bold: 800;
+  --font-weight-black: 900;
+
+  /* Element-specific font weights */
+  --font-weight-smaller: var(--font-weight-normal);
+  --font-weight-small: var(--font-weight-normal);
+  --font-weight-body: var(--font-weight-normal);
+  --font-weight-big: var(--font-weight-bold);
+  --font-weight-bigger: var(--font-weight-bold);
+  --font-weight-h6: var(--font-weight-medium);
+  --font-weight-h5: var(--font-weight-medium);
+  --font-weight-h4: var(--font-weight-medium);
+  --font-weight-h3: var(--font-weight-semibold);
+  --font-weight-h2: var(--font-weight-semibold);
+  --font-weight-h1: var(--font-weight-bold);
+  --font-weight-jumbo: var(--font-weight-black);
+
+  /* ===== Text Decoration ===== */
+  --text-decoration-none: none;
+  --text-decoration-underline: underline;
+  --text-decoration-overline: overline;
+  --text-decoration-line-through: line-through;
+
+  /* Element-specific text decoration */
+  --text-decoration-smaller: var(--text-decoration-none);
+  --text-decoration-small: var(--text-decoration-none);
+  --text-decoration-body: var(--text-decoration-none);
+  --text-decoration-big: var(--text-decoration-none);
+  --text-decoration-bigger: var(--text-decoration-none);
+  --text-decoration-h6: var(--text-decoration-none);
+  --text-decoration-h5: var(--text-decoration-none);
+  --text-decoration-h4: var(--text-decoration-none);
+  --text-decoration-h3: var(--text-decoration-none);
+  --text-decoration-h2: var(--text-decoration-none);
+  --text-decoration-h1: var(--text-decoration-none);
+  --text-decoration-jumbo: var(--text-decoration-none);
+
+  /* ===== Font Style ===== */
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+
+  /* Element-specific font styles */
+  --font-style-smaller: var(--font-style-normal);
+  --font-style-small: var(--font-style-normal);
+  --font-style-body: var(--font-style-normal);
+  --font-style-big: var(--font-style-normal);
+  --font-style-bigger: var(--font-style-normal);
+  --font-style-h6: var(--font-style-normal);
+  --font-style-h5: var(--font-style-normal);
+  --font-style-h4: var(--font-style-normal);
+  --font-style-h3: var(--font-style-normal);
+  --font-style-h2: var(--font-style-normal);
+  --font-style-h1: var(--font-style-normal);
+  --font-style-jumbo: var(--font-style-normal);
+
+  /* ===== Text Transform ===== */
+  --text-transform-none: none;
+  --text-transform-uppercase: uppercase;
+  --text-transform-lowercase: lowercase;
+  --text-transform-capitalize: capitalize;
+
+  /* Element-specific text transforms */
+  --text-transform-smaller: var(--text-transform-none);
+  --text-transform-small: var(--text-transform-none);
+  --text-transform-body: var(--text-transform-none);
+  --text-transform-big: var(--text-transform-none);
+  --text-transform-bigger: var(--text-transform-none);
+  --text-transform-h6: var(--text-transform-none);
+  --text-transform-h5: var(--text-transform-none);
+  --text-transform-h4: var(--text-transform-none);
+  --text-transform-h3: var(--text-transform-none);
+  --text-transform-h2: var(--text-transform-none);
+  --text-transform-h1: var(--text-transform-none);
+  --text-transform-jumbo: var(--text-transform-none);
+
+  /* ===== Letter Spacing ===== */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Element-specific letter spacing */
+  --letter-spacing-smaller: var(--letter-spacing-normal);
+  --letter-spacing-small: var(--letter-spacing-normal);
+  --letter-spacing-body: var(--letter-spacing-normal);
+  --letter-spacing-big: var(--letter-spacing-tight);
+  --letter-spacing-bigger: var(--letter-spacing-tight);
+  --letter-spacing-h6: var(--letter-spacing-normal);
+  --letter-spacing-h5: var(--letter-spacing-normal);
+  --letter-spacing-h4: var(--letter-spacing-normal);
+  --letter-spacing-h3: var(--letter-spacing-normal);
+  --letter-spacing-h2: var(--letter-spacing-tight);
+  --letter-spacing-h1: var(--letter-spacing-tight);
+  --letter-spacing-jumbo: var(--letter-spacing-tighter);
+}
+
+/* ===== RESPONSIVE BREAKPOINTS ===== */
+
+/* Tablet and above */
+@media (min-width: 768px) {
+  :root {
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-tablet));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-tablet));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-tablet));
+    --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-tablet));
+    --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-tablet));
+    --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-tablet));
+    
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-tablet));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-tablet));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-tablet));
+    
+    /* Text utilities */
+    --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-tablet));
+    --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-tablet));
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-tablet));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-tablet));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-tablet));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-tablet));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-tablet));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-tablet));
+
+    /* Responsive line heights - tighter for larger screens */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.1);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.05);
+    --line-height-h3-responsive: calc(var(--line-height-h3) - 0.05);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.1);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.1);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.1);
+    
+    --leading-4xl-responsive: calc(var(--leading-4xl) - 0.1);
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.1);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.1);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.1);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.1);
+    --leading-9xl-responsive: 0.9;
+    --leading-10xl-responsive: 0.9;
+  }
+}
+
+/* Desktop and above */
+@media (min-width: 1024px) {
+  :root {
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-desktop));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-desktop));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-desktop));
+    --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-desktop));
+    --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-desktop));
+    --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-desktop));
+    
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-desktop));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-desktop));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-desktop));
+    
+    /* Text utilities */
+    --text-2xl-responsive: calc(var(--text-2xl) * var(--scale-desktop));
+    --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-desktop));
+    --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-desktop));
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-desktop));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-desktop));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-desktop));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-desktop));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-desktop));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-desktop));
+
+    /* Responsive line heights - even tighter for desktop */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.15);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.1);
+    --line-height-h3-responsive: calc(var(--line-height-h3) - 0.1);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.15);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.15);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.15);
+    
+    --leading-3xl-responsive: calc(var(--leading-3xl) - 0.05);
+    --leading-4xl-responsive: calc(var(--leading-4xl) - 0.15);
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.15);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.15);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.15);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.15);
+    --leading-9xl-responsive: 0.85;
+    --leading-10xl-responsive: 0.85;
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1440px) {
+  :root {
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-large-desktop));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-large-desktop));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-large-desktop));
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-large-desktop));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-large-desktop));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-large-desktop));
+    
+    /* Text utilities */
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-large-desktop));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-large-desktop));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-large-desktop));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-large-desktop));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-large-desktop));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-large-desktop));
+
+    /* Responsive line heights - tightest for large desktop */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.2);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.15);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.2);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.2);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.2);
+    
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.2);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.2);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.2);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.2);
+    --leading-9xl-responsive: 0.8;
+    --leading-10xl-responsive: 0.8;
+  }
+}
+
+/* Mobile adjustments for very large fonts */
+@media (max-width: 480px) {
+  :root {
+    /* Reduce huge fonts slightly for mobile */
+    --font-size-big-responsive: calc(var(--font-size-big) * 0.8);
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * 0.8);
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * 0.8);
+    
+    --text-8xl-responsive: calc(var(--text-8xl) * 0.8);
+    --text-9xl-responsive: calc(var(--text-9xl) * 0.8);
+    --text-10xl-responsive: calc(var(--text-10xl) * 0.8);
+    
+    /* Slightly increase line heights for mobile readability */
+    --line-height-big-responsive: calc(var(--line-height-big) + 0.1);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) + 0.1);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) + 0.1);
+  }
 }
 
+/* ===== APPLY RESPONSIVE VARIABLES TO ELEMENTS ===== */
+
+/* Font utilities with matching line heights */
+.text-xs {
+  font-size: var(--text-xs-responsive);
+  line-height: var(--leading-xs-responsive);
+}
+
+.text-sm {
+  font-size: var(--text-sm-responsive);
+  line-height: var(--leading-sm-responsive);
+}
+
+.text-base {
+  font-size: var(--text-base-responsive);
+  line-height: var(--leading-base-responsive);
+}
+
+.text-lg {
+  font-size: var(--text-lg-responsive);
+  line-height: var(--leading-lg-responsive);
+}
+
+.text-xl {
+  font-size: var(--text-xl-responsive);
+  line-height: var(--leading-xl-responsive);
+  font-weight: 400;
+}
+
+.text-2xl {
+  font-size: var(--text-2xl-responsive);
+  line-height: var(--leading-2xl-responsive);
+  font-weight: 500;
+}
+
+.text-3xl {
+  font-size: var(--text-3xl-responsive);
+  line-height: var(--leading-3xl-responsive);
+  font-weight: 500;
+}
+
+.text-4xl {
+  font-size: var(--text-4xl-responsive);
+  line-height: var(--leading-4xl-responsive);
+  font-weight: 600;
+}
+
+.text-5xl {
+  font-size: var(--text-5xl-responsive);
+  line-height: var(--leading-5xl-responsive);
+  font-weight: 600;
+}
+
+.text-6xl {
+  font-size: var(--text-6xl-responsive);
+  line-height: var(--leading-6xl-responsive);
+  font-weight: 600;
+}
+
+.text-7xl {
+  font-size: var(--text-7xl-responsive);
+  line-height: var(--leading-7xl-responsive);
+  font-weight: 600;
+}
+
+.text-8xl {
+  font-size: var(--text-8xl-responsive);
+  line-height: var(--leading-8xl-responsive);
+  font-weight: 800;
+}
+
+.text-9xl {
+  font-size: var(--text-9xl-responsive);
+  line-height: var(--leading-9xl-responsive);
+  font-weight: 900;
+}
+
+.text-10xl {
+  font-size: var(--text-10xl-responsive);
+  line-height: var(--leading-10xl-responsive);
+  font-weight: 900;
+}
+
+.text-big {
+  font-size: var(--font-size-big-responsive);
+  line-height: var(--line-height-big-responsive);
+  font-weight: var(--font-weight-big);
+  font-style: var(--font-style-big);
+  text-decoration: var(--text-decoration-big);
+  text-transform: var(--text-transform-big);
+  letter-spacing: var(--letter-spacing-big);
+}
+
+.text-bigger {
+  font-size: var(--font-size-bigger-responsive);
+  line-height: var(--line-height-bigger-responsive);
+  font-weight: var(--font-weight-bigger);
+  font-style: var(--font-style-bigger);
+  text-decoration: var(--text-decoration-bigger);
+  text-transform: var(--text-transform-bigger);
+  letter-spacing: var(--letter-spacing-bigger);
+}
+
+.text-jumbo {
+  font-size: var(--font-size-jumbo-responsive);
+  line-height: var(--line-height-jumbo-responsive);
+  font-weight: var(--font-weight-jumbo);
+  font-style: var(--font-style-jumbo);
+  text-decoration: var(--text-decoration-jumbo);
+  text-transform: var(--text-transform-jumbo);
+  letter-spacing: var(--letter-spacing-jumbo);
+}
+
+.important{
+  font-weight: 700;
+  color: var(--primary) !important;
+}
+
+/* Mini sizes */
+.text-small {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-small);
+  font-style: var(--font-style-small);
+  text-decoration: var(--text-decoration-small);
+  text-transform: var(--text-transform-small);
+  letter-spacing: var(--letter-spacing-small);
+}
+
+.text-smaller {
+  font-size: var(--font-size-smaller);
+  line-height: var(--line-height-smaller);
+  font-weight: var(--font-weight-smaller);
+  font-style: var(--font-style-smaller);
+  text-decoration: var(--text-decoration-smaller);
+  text-transform: var(--text-transform-smaller);
+  letter-spacing: var(--letter-spacing-smaller);
+}
+
+/* Headings */
+h6,
+.h6,
+h5,
+.h5,
+h4,
+.h4,
+h3,
+.h3,
+h2,
+.h2,
+h1,
+.h1 {
+  margin-top: 0;
+  margin-bottom: 0.3rem;
+  line-height: var(--line-height-h1-responsive); /* Fallback */
+  font-weight: normal;
+}
+
+h1, .h1 {
+  font-size: var(--font-size-h1-responsive);
+  line-height: var(--line-height-h1-responsive);
+  font-weight: var(--font-weight-h1);
+  font-style: var(--font-style-h1);
+  text-decoration: var(--text-decoration-h1);
+  text-transform: var(--text-transform-h1);
+  letter-spacing: var(--letter-spacing-h1);
+}
+
+h2, .h2 {
+  font-size: var(--font-size-h2-responsive);
+  line-height: var(--line-height-h2-responsive);
+  font-weight: var(--font-weight-h2);
+  font-style: var(--font-style-h2);
+  text-decoration: var(--text-decoration-h2);
+  text-transform: var(--text-transform-h2);
+  letter-spacing: var(--letter-spacing-h2);
+}
+
+h3, .h3 {
+  font-size: var(--font-size-h3-responsive);
+  line-height: var(--line-height-h3-responsive);
+  font-weight: var(--font-weight-h3);
+  font-style: var(--font-style-h3);
+  text-decoration: var(--text-decoration-h3);
+  text-transform: var(--text-transform-h3);
+  letter-spacing: var(--letter-spacing-h3);
+}
+
+h4, .h4 {
+  font-size: var(--font-size-h4-responsive);
+  line-height: var(--line-height-h4-responsive);
+  font-weight: var(--font-weight-h4);
+  font-style: var(--font-style-h4);
+  text-decoration: var(--text-decoration-h4);
+  text-transform: var(--text-transform-h4);
+  letter-spacing: var(--letter-spacing-h4);
+}
+
+h5, .h5 {
+  font-size: var(--font-size-h5-responsive);
+  line-height: var(--line-height-h5-responsive);
+  font-weight: var(--font-weight-h5);
+  font-style: var(--font-style-h5);
+  text-decoration: var(--text-decoration-h5);
+  text-transform: var(--text-transform-h5);
+  letter-spacing: var(--letter-spacing-h5);
+}
+
+h6, .h6 {
+  font-size: var(--font-size-h6-responsive);
+  line-height: var(--line-height-h6-responsive);
+  font-weight: var(--font-weight-h6);
+  font-style: var(--font-style-h6);
+  text-decoration: var(--text-decoration-h6);
+  text-transform: var(--text-transform-h6);
+  letter-spacing: var(--letter-spacing-h6);
+}
+
+
+
 
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
@@ -411,7 +895,6 @@
   color: var(--text-color) ;
 }
 
-/* normalise css */
 
 *,
 *::before,
@@ -419,54 +902,18 @@
   box-sizing: border-box !important;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  :root {
-    scroll-behavior: smooth;
-  }
-}
 body {
-  padding: 0px;
+    padding: 0px;
   margin: 0px;
-  box-sizing: border-box;
-  line-height: var(--bd-line-height);
-  font-weight: var(--bd-font-weight);
-  background-color: var(--bd-theme);
-  color: var(--bd-color);
+  font-size: var(--text-base);
+  font-weight: var(--bd-font-weight) !important;
+  line-height: var(--leading-normal) !important;
   letter-spacing: normal;
-  font-size: var(--bdfontSize) ;
-
-}
-
-
-.theme{
-  background-color: var(--bd-theme);
-}
-.raiseTheme{
-  background-color: var(--raiseThemes) !important;
+  background-color: var(--page-bg) !important;
+  color: var(--text-color) !important;
 }
 
-/* links and href */
-a,
-Link {
-  text-decoration: none;
-  background: transparent;
-  transition: 0.3s;
-  color: var(--linkColor);
-  font-weight: 500;
-}
-a:hover {
-  color: var(--linkHover);
-}
 
-button {
-  -webkit-appearance: button;
-}
-link {
-  text-decoration: none;
-}
-link:hover {
-  text-decoration: none;
-}
 
 /* Background Color */
 .pop{
@@ -487,131 +934,45 @@ button:disabled {
 /* Typography */
 .baseColor, .text-base{
   color: var(--text-color) !important;}
-
-body {
-  font-size: var(--text-base);
-  font-weight: var(--bd-font-weight) !important;
-  line-height: var(--leading-normal) !important;
-  letter-spacing: normal;
-  background-color: var(--page-bg) !important;
-  color: var(--text-color) !important;
-}
 .bg, .page-bg{
   background-color: var(--page-bg) !important;
 }
 
-/* Font utilities with matching line heights */
-.text-xs {
-  font-size: var(--text-xs);
-  line-height: var(--leading-xs);
-}
-
-.text-sm {
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
-}
-
-.text-base {
-  font-size: var(--text-base);
-  line-height: var(--leading-base);
-}
 
-.text-lg {
-  font-size: var(--text-lg);
-  line-height: var(--leading-lg);
-}
 
-.text-xl {
-  font-size: var(--text-xl);
-  line-height: var(--leading-xl);
-  font-weight: 400;
+.theme{
+  background-color: var(--bd-theme);
 }
-
-.text-2xl {
-  font-size: var(--text-2xl);
-  line-height: var(--leading-2xl);
-  font-weight: 500;
+.raiseTheme{
+  background-color: var(--raiseThemes) !important;
 }
 
-.text-3xl {
-  font-size: var(--text-3xl);
-  line-height: var(--leading-3xl);
+/* links and href */
+a,
+Link {
+  text-decoration: none;
+  background: transparent;
+  transition: 0.3s;
+  color: var(--linkColor);
   font-weight: 500;
 }
-
-.text-4xl {
-  font-size: var(--text-4xl);
-  line-height: var(--leading-4xl);
-        font-weight: 600;
+a:hover {
+  color: var(--linkHover);
 }
 
-.text-5xl {
-  font-size: var(--text-5xl);
-  line-height: var(--leading-5xl);
-      font-weight: 600;
-}
-.text-6xl {
-  font-size: var(--text-6xl);
-  line-height: var(--leading-6xl);
-      font-weight: 600;
+button {
+  -webkit-appearance: button;
 }
-
-.text-7xl {
-  font-size: var(--text-7xl);
-  line-height: var(--leading-7xl);
-    font-weight: 600;
+link {
+  text-decoration: none;
 }
-
-.text-8xl {
-  font-size: var(--text-8xl);
-  line-height: var(--leading-8xl);
-    font-weight: 800;
+link:hover {
+  text-decoration: none;
 }
 
-.text-9xl {
-  font-size: var(--text-9xl);
-  line-height: var(--leading-9xl);
-    font-weight: 900;
-}
 
-.text-10xl {
-  font-size: var(--text-10xl);
-  line-height: var(--leading-10xl);
-    font-weight: 900;
-}
 
-/* Additional responsive/animated sizes */
-.text-big {
-  font-size: calc(1.375rem + 2vw);     /* Responsive scaling */
-  line-height: 80%;
-    font-weight: 900;
-}
 
-.text-bigger {
-  font-size: calc(1.375rem + 2.5vw);
-  line-height: 80% ;
-    font-weight: 900;
-}
-
-.text-jumbo {
-  font-size: calc(1.375rem + 5vw);
-  line-height: 70%;
-  font-weight: 900;
-}
-.important{
-  font-weight: 700;
-  color: var(--primary) !important	;
-}
-/* Mini sizes */
-.text-small {
-  font-size: var(--smallFont);
-  line-height: 1.25rem;
-}
-
-.text-smaller {
-  font-size: var(--smallerFont);
-  line-height: 1.125rem;
-}
 
 .text-minified  , .text-md{
   font-size: var(--minifiedFontSize);
@@ -626,64 +987,6 @@ body {
 
 
 
-/* Headings */
-h6,
-.h6,
-h5,
-.h5,
-h4,
-.h4,
-h3,
-.h3,
-h2,
-.h2,
-h1,
-.h1 {
-  margin-top: 0;
-  margin-bottom: 0.3rem;
-  line-height: 1.2;
-  font-weight: normal;
-}
-
-h1, .h1 {
-  font-size: var(--text-5xl);
-  line-height: var(--leading-none);
-    font-weight: 900;
-}
-
-h2, .h2 {
-  font-size: var(--text-4xl);
-  line-height: var(--leading-4xl);
-  font-weight: 900;
-}
-
-h3, .h3 {
-  font-size: var(--text-3xl);
-  line-height: var(--leading-3xl);
-   font-weight: 700;
-}
-
-h4, .h4 {
-  font-size: var(--text-2xl);
-  line-height: var(--leading-2xl);
-    font-weight: 600;
-}
-
-h5, .h5 {
-  font-size: var(--text-xl);
-  line-height: var(--leading-xl);
-      font-weight: 500;
-}
-
-h6, .h6 {
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-     font-weight: 500;
-}
-
-
-
-
 .text-bold {
   font-weight: bold !important;
 }
@@ -1089,7 +1392,6 @@ h6, .h6 {
 }
 
 
-
 /*buttons*/
 .button {
   border: none;
@@ -1101,7 +1403,6 @@ h6, .h6 {
   font-size: var(--minifiedFontSize);
   position: relative;
   overflow: hidden;
-  font-weight: 500;
   z-index: 1;
   line-height: 1 !important;
   height: var(--inputButtonHeight);
@@ -1969,8 +2270,6 @@ border-radius: var(--borderRadius);
 
 
 
-
-
 .dropup:hover .drop-menu {
   display: block;
   z-index: 1;
@@ -2012,7 +2311,6 @@ border-radius: var(--borderRadius);
   color: var(--text-color);
   font-size: var(--minifiedFontSize);
   background-color: var(--page-bg);
-  font-weight: 500;
   transition: all 0.2s ease;
 }
 
@@ -2041,7 +2339,6 @@ border-radius: var(--borderRadius);
 /* Floating Label Styles */
 .floating-label {
   position: absolute;
-  left: 0.8rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: var(--minifiedFontSize);
@@ -2050,14 +2347,11 @@ border-radius: var(--borderRadius);
   pointer-events: none;
   transition: all 0.2s ease;
   background-color: transparent;
-  padding: 0 0.25rem;
   z-index: 1;
-  font-weight: 500;
 }
 
 .floating-label.active {
   top: 0.35rem;
-  left: 0.8rem;
   font-size: 0.625rem;
   opacity: 1;
   background-color: transparent;
@@ -2066,7 +2360,7 @@ border-radius: var(--borderRadius);
   transform: translateY(0);
   line-height: 1;
 }
-.floating-label.label-left{left: 2.5rem ;}
+.floating-label.label-left{left: 2.2rem ;}
 /* Label status colors */
 .floating-label.label-success.active {
   color: var(--success);
@@ -2097,14 +2391,6 @@ border-radius: var(--borderRadius);
   background-color: transparent;
 }
 
-/* For textarea */
-textarea ~ .floating-label {
-  top: 1.2rem;
-}
-
-textarea ~ .floating-label.active {
-  top: 0.35rem;
-}
 
 /* Status Input Styles */
 .input.success-input,
@@ -2157,8 +2443,7 @@ textarea {
   border-radius: var(--radius) !important;
   height: fit-content !important;
   min-height: 4rem;
-  padding-top: 1.4rem;
-  padding-bottom: 0.6rem;
+  padding-top: 0.8rem !important;
 }
 
 /* Reset padding when there's no label for textarea */
@@ -2363,8 +2648,6 @@ select:focus {
   align-items: center;
   justify-content: center;
   height: 100%;
-  width: 2.5rem;
-  padding: 1rem;
   z-index: 2;
   pointer-events: auto;
   top: 0;
@@ -2413,9 +2696,8 @@ select:focus {
 .icon-container.has-left-icon > .input,
 .icon-container.has-left-icon > input,
 .icon-container.has-left-icon > select {
-  padding-left: 2.75rem;
-  padding-top: 1.2rem;
-  padding-bottom: 0.4rem;
+  padding-left: 2.2rem;
+  padding-top: 1.3rem;
 }
 
 .icon-container:has(.rightIcon) > .input,
@@ -2423,7 +2705,6 @@ select:focus {
 .icon-container:has(.rightIcon) > select {
   padding-right: 2.75rem;
   padding-top: 1.2rem;
-  padding-bottom: 0.4rem;
 }
 
 /* Reset padding when no label */
@@ -2820,13 +3101,6 @@ padding-right: 2.5rem;
 }
 
 
-/* SearchableInput.css - Matching your theme format */
-
-/* Reset and base styles */
-* {
-  box-sizing: border-box;
-}
-
 /* Main wrapper */
 .searchable-input-wrapper {
   position: relative;
@@ -4710,8 +4984,6 @@ background-color: rgba(0, 0, 0, 0.2);
   
   .range-wrapper {
     position: relative;
-    height: 50px;
-
   }
   
   .range-tooltip {
@@ -4740,9 +5012,9 @@ background-color: rgba(0, 0, 0, 0.2);
   
   .range-slider {
     width: 100%;
-    height: 6px !important;
+    height: 8px !important;
     appearance: none;
-    background: var(--lighter);
+    background: var(--borderColor);
     border-radius: 5rem;
     outline: none;
     padding: 0 !important;
@@ -4752,7 +5024,7 @@ background-color: rgba(0, 0, 0, 0.2);
     appearance: none;
     width: 20px;
     height: 20px;
-    background-color: var(--primary200);
+    background-color: var(--primary300);
     border: 0.1rem solid var(--primary500);
     border-radius: 50%;
     cursor: pointer;
@@ -4764,7 +5036,7 @@ background-color: rgba(0, 0, 0, 0.2);
   }
   
   .range-slider::-moz-range-thumb {
-    background-color: var(--primary200);
+    background-color: var(--primary300);
     border: 0.1rem solid var(--primary500);
     border-radius: 50%;
     cursor: pointer;