@ozdao/martyrs 0.2.571 → 0.2.572

package/src/styles/config.scss

@@ -1,531 +1,217 @@
-@use "sass:map";
-// Generate Variants for Colors Variables
-@mixin generate-vars-color($base-var-name) {
-  --#{$base-var-name}-extra: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, black 80%);
-	--#{$base-var-name}-big: 			color-mix(in srgb, rgb(var(--#{$base-var-name})) 25%, black 70%);
-	--#{$base-var-name}-semi: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 50%, black 60%);
-	--#{$base-var-name}-medium: 	color-mix(in srgb, rgb(var(--#{$base-var-name})) 90%, black 50%);
-	--#{$base-var-name}-regular: 	rgb(var(--#{$base-var-name}));
-	--#{$base-var-name}-small: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 90%, white 50%);
-	--#{$base-var-name}-thin: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 50%, white 60%);
-	--#{$base-var-name}-micro: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 25%, white 70%);
-	--#{$base-var-name}-nano: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, white 80%);
+// ============================================================================
+// SASS BREAKPOINTS (for media queries - CSS vars don't work in @media)
+// ============================================================================
+$super-ultra-tiny-flip-phone-max: 240px;
+$flip-phone-max: 320px;
+$phone-portrait-max: 321px;
+$phone-landscape-max: 640px;
+$tablet-portrait-min: 641px;
+$tablet-portrait-max: 768px;
+$tablet-landscape-min: 769px;
+$tablet-landscape-max: 1024px;
+$desktop-min: 1025px;
+$desktop-max: 1440px;
+$xl-desktop-min: 1441px;
+$xl-desktop-max: 1920px;
+$xxl-desktop-min: 1921px;
+
+// ============================================================================
+// MIXINS
+// ============================================================================
+@mixin generate-vars-color($name) {
+  --#{$name}-extra:   color-mix(in srgb, rgb(var(--#{$name})) 10%, black);
+  --#{$name}-big:     color-mix(in srgb, rgb(var(--#{$name})) 25%, black);
+  --#{$name}-semi:    color-mix(in srgb, rgb(var(--#{$name})) 50%, black);
+  --#{$name}-medium:  color-mix(in srgb, rgb(var(--#{$name})) 75%, black);
+  --#{$name}-regular: rgb(var(--#{$name}));
+  --#{$name}-small:   color-mix(in srgb, rgb(var(--#{$name})) 75%, white);
+  --#{$name}-thin:    color-mix(in srgb, rgb(var(--#{$name})) 50%, white);
+  --#{$name}-micro:   color-mix(in srgb, rgb(var(--#{$name})) 25%, white);
+  --#{$name}-nano:    color-mix(in srgb, rgb(var(--#{$name})) 10%, white);
 }
 
-// Dark Theme Mixin
-@mixin dark-variant($selector, $property, $value) {
-  .#{$selector} { #{$property}: $value; }
-  @media (prefers-color-scheme: dark) {
-    .dark\:#{$selector} { #{$property}: $value; }
-  }
-}
-
-// Simple color classes (for colors without variants)
-@mixin generate-simple-color($name, $var) {
-  @include dark-variant('bg-#{$name}', 'background', rgb(var(--#{$var})));
-  @include dark-variant('t-#{$name}', 'color', rgb(var(--#{$var})));
-  @include dark-variant('fill-#{$name}', 'fill', rgb(var(--#{$var})));
-  @include dark-variant('stroke-#{$name}', 'stroke', rgb(var(--#{$var})));
+@mixin dark-theme-colors {
+  --white: 18, 18, 18;
+  --light: 27, 23, 25;
+  --grey: 0, 0, 0;
+  --dark: 190, 181, 190;
+  --black: 255, 255, 255;
+  @include generate-vars-color('white');
+  @include generate-vars-color('light');
+  @include generate-vars-color('grey');
+  @include generate-vars-color('dark');
+  @include generate-vars-color('black');
 }
 
-// Brand color classes
-@mixin generate-brand-color($name, $var) {
-  @include dark-variant('bg-#{$name}', 'background', rgba(var(--#{$var}), 1));
-  @include dark-variant('t-#{$name}', 'color', rgba(var(--#{$var}), 1));
-  @include dark-variant('fill-#{$name}', 'fill', rgba(var(--#{$var}), 1));
+// ============================================================================
+// CSS VARIABLES
+// ============================================================================
+@layer base {
+:root {
+  color-scheme: light dark;
+
+  // 1. COLORS
+  --main: 10, 250, 125;
+  @include generate-vars-color('main');
+  --second: 34, 102, 255;
+  @include generate-vars-color('second');
+  --third: 162, 10, 255;
+  @include generate-vars-color('third');
+  --fourth: 255, 10, 84;
+  @include generate-vars-color('fourth');
+  --fifth: 255, 216, 10;
+  @include generate-vars-color('fifth');
+
+  // Neutrals
+  --black: 0, 0, 0;
+  @include generate-vars-color('black');
+  --dark: 70, 80, 70;
+  @include generate-vars-color('dark');
+  --grey: 180, 180, 180;
+  @include generate-vars-color('grey');
+  --light: 245, 249, 247;
+  @include generate-vars-color('light');
+  --white: 255, 255, 255;
+  @include generate-vars-color('white');
+
+  // Tones (without variants)
+  --red: 360, 70, 90;
+  --red-nice: 354, 80, 100;
+  --green: 88, 207, 57;
+  --green-nice: 35, 226, 0;
+  --orange: 8, 72, 94;
+  --orange-nice: 13, 70, 100;
+  --yellow: 38, 100, 100;
+  --yellow-nice: 45, 97, 100;
+
+  // Brands
+  --youtube: 252, 13, 27;
+  --telegram: linear-gradient(0deg, #1D93D2 0%, #38B0E3 100%), #000000;
+  --twitter: 29, 155, 240;
+  --instagram: 233, 89, 80;
+  --reddit: 255, 69, 0;
+
+  // Special
+  --transparent: 0, 0, 0, 0;
+
+  // 2. SIZES
+  --extra: 5rem;
+  --big: 3.25rem;
+  --semi: 2.5rem;
+  --medium: 1.5rem;
+  --regular: 1rem;
+  --small: 0.75rem;
+  --thin: 0.5rem;
+  --micro: 0.25rem;
+  --nano: 0.125rem;
+
+  // 3. FONTS
+  --font: 'Avenir Next World';
+  --font-main: 'Avenir Next World';
+  --font-second: 'Avenir Next World';
+
+  // 4. BREAKPOINTS (CSS vars for reference, use SASS vars in @media)
+  --flip-phone-max: #{$flip-phone-max};
+  --phone-landscape-max: #{$phone-landscape-max};
+  --tablet-portrait-min: #{$tablet-portrait-min};
+  --tablet-portrait-max: #{$tablet-portrait-max};
+  --tablet-landscape-min: #{$tablet-landscape-min};
+  --tablet-landscape-max: #{$tablet-landscape-max};
+  --desktop-min: #{$desktop-min};
+  --desktop-max: #{$desktop-max};
+  --xl-desktop-min: #{$xl-desktop-min};
+  --xl-desktop-max: #{$xl-desktop-max};
+  --xxl-desktop-min: #{$xxl-desktop-min};
 }
 
-@mixin generate-color-classes($base-name, $var-name) {
-  // Background classes
-  @include dark-variant('bg-#{$base-name}', 'background', rgb(var(--#{$var-name})));
-  @include dark-variant('bg-#{$base-name}-extra', 'background', var(--#{$var-name}-extra));
-  @include dark-variant('bg-#{$base-name}-big', 'background', var(--#{$var-name}-big));
-  @include dark-variant('bg-#{$base-name}-semi', 'background', var(--#{$var-name}-semi));
-  @include dark-variant('bg-#{$base-name}-medium', 'background', var(--#{$var-name}-medium));
-  @include dark-variant('bg-#{$base-name}-regular', 'background', var(--#{$var-name}-regular));
-  @include dark-variant('bg-#{$base-name}-small', 'background', var(--#{$var-name}-small));
-  @include dark-variant('bg-#{$base-name}-thin', 'background', var(--#{$var-name}-thin));
-  @include dark-variant('bg-#{$base-name}-micro', 'background', var(--#{$var-name}-micro));
-  @include dark-variant('bg-#{$base-name}-nano', 'background', var(--#{$var-name}-nano));
-  
-  // Transparent background variants
-  @for $i from 1 through 20 {
-    $percentage: $i * 5;
-    @include dark-variant('bg-#{$base-name}-transp-#{$percentage}', 'background', rgba(var(--#{$var-name}), $percentage * 0.01));
+// ============================================================================
+// DARK THEME
+// ============================================================================
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    @include dark-theme-colors;
   }
-  
-  // Text color classes
-  @include dark-variant('t-#{$base-name}', 'color', rgb(var(--#{$var-name})));
-  @include dark-variant('t-#{$base-name}-extra', 'color', var(--#{$var-name}-extra));
-  @include dark-variant('t-#{$base-name}-big', 'color', var(--#{$var-name}-big));
-  @include dark-variant('t-#{$base-name}-semi', 'color', var(--#{$var-name}-semi));
-  @include dark-variant('t-#{$base-name}-medium', 'color', var(--#{$var-name}-medium));
-  @include dark-variant('t-#{$base-name}-regular', 'color', var(--#{$var-name}-regular));
-  @include dark-variant('t-#{$base-name}-small', 'color', var(--#{$var-name}-small));
-  @include dark-variant('t-#{$base-name}-thin', 'color', var(--#{$var-name}-thin));
-  @include dark-variant('t-#{$base-name}-micro', 'color', var(--#{$var-name}-micro));
-  @include dark-variant('t-#{$base-name}-nano', 'color', var(--#{$var-name}-nano));
-  
-  // Fill classes
-  @include dark-variant('fill-#{$base-name}', 'fill', rgb(var(--#{$var-name})));
-  @include dark-variant('fill-#{$base-name}-extra', 'fill', var(--#{$var-name}-extra));
-  @include dark-variant('fill-#{$base-name}-big', 'fill', var(--#{$var-name}-big));
-  @include dark-variant('fill-#{$base-name}-semi', 'fill', var(--#{$var-name}-semi));
-  @include dark-variant('fill-#{$base-name}-medium', 'fill', var(--#{$var-name}-medium));
-  @include dark-variant('fill-#{$base-name}-regular', 'fill', var(--#{$var-name}-regular));
-  @include dark-variant('fill-#{$base-name}-small', 'fill', var(--#{$var-name}-small));
-  @include dark-variant('fill-#{$base-name}-thin', 'fill', var(--#{$var-name}-thin));
-  @include dark-variant('fill-#{$base-name}-micro', 'fill', var(--#{$var-name}-micro));
-  @include dark-variant('fill-#{$base-name}-nano', 'fill', var(--#{$var-name}-nano));
-  
-  // Stroke classes
-  @include dark-variant('stroke-#{$base-name}', 'stroke', rgb(var(--#{$var-name})));
 }
 
-@mixin generate-base-classes($class-name, $css-property, $values) {
-  @each $value-key, $value in $values {
-    .#{$class-name}-#{$value-key} {
-      #{$css-property}: $value;
-    }
-    .#{$class-name}-#{$value-key}-negative {
-      #{$css-property}: calc(#{$value} * -1);
-    }
-  }
+:root[data-theme="dark"] {
+  @include dark-theme-colors;
 }
 
-@mixin generate-modifier-classes($class-name, $css-property, $modifiers, $values) {
-  @each $value-key, $value in $values {
-    @each $modifier, $css-modifier in $modifiers {
-      .#{$class-name}-#{$modifier}-#{$value-key} {
-        #{$css-property}-#{$css-modifier}: $value;
-      }
-      .#{$class-name}-#{$modifier}-#{$value-key}-negative {
-        #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
-      }
-    }
-  }
+// ============================================================================
+// RESPONSIVE FONT SIZE
+// ============================================================================
+@media screen and (min-width: $xxl-desktop-min) {
+  html, body { font-size: 22px; }
 }
 
-@mixin generate-breakpoint-classes($class-name, $css-property, $values, $modifiers, $breakpoints) {
-  @each $breakpoint-key, $breakpoint-query in $breakpoints {
-    @media #{$breakpoint-query} {
-      @each $value-key, $value in $values {
-        .#{$breakpoint-key}\:#{$class-name}-#{$value-key} {
-          #{$css-property}: $value;
-        }
-        .#{$breakpoint-key}\:#{$class-name}-#{$value-key}-negative {
-          #{$css-property}: calc(#{$value} * -1);
-        }
-      }
-      @if $modifiers {
-        @each $value-key, $value in $values {
-          @each $modifier, $css-modifier in $modifiers {
-            .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key} {
-              #{$css-property}-#{$css-modifier}: $value;
-            }
-            .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key}-negative {
-              #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
-            }
-          }
-        }
-      }
-    }
-  }
+@media screen and (min-width: $xl-desktop-min) {
+  html, body { font-size: 24px; }
 }
 
-@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values, $breakpoints: null) {
-  // Генерация базовых классов без модификаторов и медиа-запросов
-  @include generate-base-classes($class-name, $css-property, $values);
-
-  // Генерация классов с модификаторами
-  @if $modifiers {
-    @include generate-modifier-classes($class-name, $css-property, $modifiers, $values);
-  }
-
-  // Генерация классов с медиа-запросами
-  @if $breakpoints {
-    @include generate-breakpoint-classes($class-name, $css-property, $values, $modifiers, $breakpoints);
-  }
+@media screen and (max-width: $desktop-max) {
+  html, body { font-size: 16px; }
 }
 
-:root {
-	// THEME
-	color-scheme: light dark;
-	////////////////////////////////////////
-	// 1.COLORS VARIABLES 
-	///////////////////////////////////////
-	--main: 	10,250,125;;
-	@include 	generate-vars-color('main');
-	--second:	34,102,255;
-	@include 	generate-vars-color('second');
-	--third:	162,10,255;
-	@include 	generate-vars-color('third');
-	--fourth:	255,10,84;
-	@include 	generate-vars-color('fourth');
-	--fifth:	255,216,10;
-	@include 	generate-vars-color('fifth');
-	// Black and white colors
-	--black:  0,0,0;
-	@include 	generate-vars-color('black');
-	--dark:   70,80,70; 	
-	@include 	generate-vars-color('dark');
-	--grey:   180,180,180; 
-	@include 	generate-vars-color('grey');
-	--light:  245,249,247; 
-	@include 	generate-vars-color('light');
-	--white:  255,255,255;
-	@include 	generate-vars-color('white');
-	// Tones
-	--red: 					360, 70, 90;
-	--red-nice: 		354, 80, 100;
-	--green: 				88,	 207,	57;
-	--green-nice: 	35,	226,	0;
-	--orange: 			8, 72, 94;
-	--orange-nice:	13, 70, 100;
-	--yellow: 			38, 100, 100;
-	--yellow-nice: 	45, 97, 100;
-	// For brands
-	--youtube:			252,13,27;
-	--telegram:			linear-gradient(0deg, #1D93D2 0%, #38B0E3 100%), #000000;
-	--twitter:			29,155,240;
-	--instagram:		233,89,80;
-	--reddit:				255,69,0;
-	// Special
-	--transparent:  0,0,0,0;
-	/////////////////////////////////////////
-	// 2.SIZE VARIABLES //
-	///////////////////////////////////////
-	--extra:   	5.000rem;
-	--big:   		3.250rem;
-	--semi:     2.500rem;
-	--medium:  	1.500rem;
-	--regular:	1.000rem;
-	--small:   	0.750rem;
-	--thin:     0.500rem;
-	--micro: 		0.250rem;
-	--nano: 		0.125rem;
-
-	////////////////////////////////////////
-	// 3. TEXT VARIABLES
-	///////////////////////////////////////
-	--font: 'Avenir Next World';
-	--font-main: 'Avenir Next World';
-	--font-second: 'Avenir Next World';
-	////////////////////////////////////////
-	// 4. BREAKPOINTS
-	///////////////////////////////////////
-	--flip-phone-max:				320px;
-	--phone-landscape-max: 	640px;
-	--tablet-portrait-min: 	641px;
-	--tablet-portrait-max: 	768px;
-	--tablet-landscape-min:	769px;
-	--tablet-landscape-max:	1024px;
-	--desktop-min: 					1025px;
-	--desktop-max: 					1440px;
-	--xl-desktop-min: 			1441px;
-	--xl-desktop-max: 			1920px;
-	--xxl-desktop-min: 			1921px;
+@media screen and (max-width: $tablet-landscape-max) {
+  html, body { font-size: 24px; }
 }
-$modifiers: (
-  't': 'top',
-  'r': 'right',
-  'b': 'bottom',
-  'l': 'left'
-);
-
-$variables: (
-  'extra': var(--extra),
-  'big': var(--big),
-  'semi': var(--semi),
-  'medium': var(--medium),
-  'regular': var(--regular),
-  'small': var(--small),
-  'thin': var(--thin),
-  'micro': var(--micro),
-  'nano': var(--nano),
-);
-
-$rem: (
-  '50r': 50rem,
-  '45r': 45rem,
-  '40r': 40rem,
-  '35r': 35rem,
-  '32r': 32rem,
-  '30r': 30rem,
-  '25r': 25rem,
-  '24r': 24rem,
-  '20r': 20rem,
-  '16r': 16rem,
-  '15r': 15rem,
-  '12r': 12rem,
-  '10r': 10rem,
-  '8r': 8rem,
-  '6r': 5rem,
-  '5r': 5rem,
-  '4r': 4rem,
-  '3r': 3rem,
-  '2r': 2rem,
-  '1r': 1rem,
-);
-
-$vh: (
-  '100vh': 100vh,
-  '80vh': 80vh,
-  '75vh': 75vh,
-  '66vh': 66vh,
-  '50vh': 50vh,
-  '40vh': 40vh,
-  '33vh': 33vh,
-  '25vh': 25vh,
-  '20vh': 20vh,
-  '15vh': 15vh,
-  '10vh': 10vh,
-);
-
-$percent: (
-  '100': 100%,
-  '80': 80%,
-  '75': 75%,
-  '70': 70%,
-  '66': 66%,
-  '50': 50%,
-  '45': 45%,
-  '40': 40%,
-  '33': 33%,
-  '25': 25%,
-  '20': 20%,
-  '15': 15%,
-  '10': 10%,
-  '5': 5%,
-  '0': 0%,
-);
 
-$breakpoints: (
-  'mobile': "(max-width: 640px)",
-  'tablet': "(min-width: 641px) and (max-width: 1024px)",
-  'desktop': "(min-width: 1025px) and (max-width: 1440px)",
-  'widescreen': "(min-width: 1441px)"
-);
-
-$base: (
-  'auto': auto,
-  'zero': 0,
-);
-
-$combined: map.merge($vh, $rem);
-$combined: map.merge($combined, $percent);
-$combined: map.merge($combined, $variables);
-$combined: map.merge($combined, $base);
-
-/* -------------------------- */
-/* FLEX */
-/* ------------------------- */
-$justify-content: (
-  'h-center': center,
-  'justify-start': flex-start,
-  'justify-center': center,
-  'justify-end': flex-end,
-  'justify-between': space-between,
-  'justify-around': space-around,
-);
-
-$align-items: (
-  'v-center': center,
-  'align-start': flex-start,
-  'align-center': center,
-  'align-end': flex-end,
-  'align-stretch': stretch,
-  'align-baseline': baseline,
-);
-
-$flex-direction: (
-  'row': row,
-  'column': column
-);
-
-$position-values: (
-  'relative': relative,
-  'absolute': absolute,
-  'fixed': fixed,
-  'sticky': sticky,
-  'static': static
-);
-
-$overflow-values: (
-  'hidden': hidden,
-  'scroll': scroll,
-  'auto': auto,
-  'visible': visible,
-  'clip': clip,
-  'initial': initial,
-  'inherit': inherit,
-  'unset': unset,
-  'revert': revert,
-  'revert-layer': revert-layer
-);
-
-$overflow-xy-values: (
-  'hidden': hidden,
-  'scroll': scroll,
-  'auto': auto,
-  'visible': visible,
-  'clip': clip
-);
-
-$display-values: (
-  'block': block,
-  'inline': inline,
-  'inline-block': inline-block,
-  'flex': flex,
-  'inline-flex': inline-flex,
-  'grid': grid,
-  'inline-grid': inline-grid,
-  'none': none,
-  'table': table,
-  'table-row': table-row,
-  'table-cell': table-cell
-);
-
-$text-align-values: (
-  'left': left,
-  'center': center,
-  'right': right,
-);
+@media screen and (max-width: $phone-landscape-max) {
+  html, body { font-size: 16px; }
+}
 
-$order: (
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-  '7': 7,
-  '8': 8,
-  '9': 9,
-  '10': 10
-);
+@media screen and (max-width: $flip-phone-max) {
+  html, body { font-size: 16px; }
+}
 
-$cols: (
-	'1': minmax(0, 1fr),
-	'2': minmax(0, 1fr) minmax(0, 1fr),
-	'3': minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr),
-	'4': minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr),
-	'5': minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr),
-	'6': minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr),
-);
+@media screen and (max-width: $super-ultra-tiny-flip-phone-max) {
+  html, body { font-size: 16px; }
+}
 
-body {
-  @include generate-utility-classes('d', 'display', null, $display-values, $breakpoints);
-  @include generate-utility-classes('pos', 'position', null, $position-values, $breakpoints);
-  @include generate-utility-classes('pos-t', 'top', null, $combined, $breakpoints);
-  @include generate-utility-classes('pos-r', 'right', null, $combined, $breakpoints);
-  @include generate-utility-classes('pos-b', 'bottom', null, $combined, $breakpoints);
-  @include generate-utility-classes('pos-l', 'left', null, $combined, $breakpoints);
+// ============================================================================
+// VISIBILITY UTILITIES
+// ============================================================================
+@media screen and (min-width: $tablet-portrait-min) {
+  .mobile-only { display: none !important; }
+}
 
-	@include generate-utility-classes('w', 'width', null, $combined, $breakpoints);
-	@include generate-utility-classes('h', 'height', null, $combined, $breakpoints);
-	@include generate-utility-classes('h-max', 'max-height', null, $combined, $breakpoints);
-	@include generate-utility-classes('h-min', 'min-height', null, $combined, $breakpoints);
-	@include generate-utility-classes('w-max', 'max-width',	null, $combined, $breakpoints);
-	@include generate-utility-classes('w-min', 'min-width',	null, $combined, $breakpoints);
+@media screen and (max-width: $desktop-min) {
+  .desktop-only { display: none !important; }
+  .mobile-only { display: inherit !important; }
+}
 
-  @include generate-utility-classes('pd', 'padding', $modifiers, $combined, $breakpoints);
-  @include generate-utility-classes('mn', 'margin', $modifiers, $combined, $breakpoints);
-	@include generate-utility-classes('radius', 'border-radius', null, $combined, $breakpoints);
-	@include generate-utility-classes('radius-tl', 'border-top-left-radius', null, $combined, $breakpoints);
-	@include generate-utility-classes('radius-tr', 'border-top-right-radius', null, $combined, $breakpoints);
-	@include generate-utility-classes('radius-br', 'border-bottom-right-radius', null, $combined, $breakpoints);
-	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius', null, $combined, $breakpoints);
-  // Typography
-  @include generate-utility-classes('t', 'text-align', null, $text-align-values, $breakpoints);
-  // Layout
-	@include generate-utility-classes('cols', 'grid-template-columns', null, $cols, $breakpoints);
-  @include generate-utility-classes('gap', 'gap', null, $combined, $breakpoints);
-  @include generate-utility-classes('flex', 'justify-content', null, $justify-content, $breakpoints);
-  @include generate-utility-classes('flex', 'align-items', null, $align-items, $breakpoints);
-  @include generate-utility-classes('flex', 'flex-direction', null, $flex-direction, $breakpoints);
-  @include generate-utility-classes('order', 'order', null, $order, $breakpoints);
-  // Overflow
-  @include generate-utility-classes('o', 'overflow', null, $overflow-values, $breakpoints);
-  @include generate-utility-classes('o-x', 'overflow-x', null, $overflow-xy-values, $breakpoints);
-  @include generate-utility-classes('o-y', 'overflow-y', null, $overflow-xy-values, $breakpoints);
-	// Colors
-	@include generate-color-classes('main', 'main');
-  @include generate-color-classes('second', 'second');
-  @include generate-color-classes('third', 'third');
-  @include generate-color-classes('fourth', 'fourth');
-  @include generate-color-classes('fifth', 'fifth');
-  
-  // Neutrals with all variants
-  @include generate-color-classes('black', 'black');
-  @include generate-color-classes('dark', 'dark');
-  @include generate-color-classes('grey', 'grey');
-  @include generate-color-classes('light', 'light');
-  @include generate-color-classes('white', 'white');
-  
-  // Tone colors
-  @include generate-simple-color('red', 'red');
-  @include generate-simple-color('red-nice', 'red-nice');
-  @include generate-simple-color('green', 'green');
-  @include generate-simple-color('green-nice', 'green-nice');
-  @include generate-simple-color('orange', 'orange');
-  @include generate-simple-color('orange-nice', 'orange-nice');
-  @include generate-simple-color('yellow', 'yellow');
-  @include generate-simple-color('yellow-nice', 'yellow-nice');
-  
-  // Brand colors
-  @include generate-brand-color('youtube', 'youtube');
-  @include generate-brand-color('telegram', 'telegram');
-  @include generate-brand-color('twitter', 'twitter');
-  @include generate-brand-color('reddit', 'reddit');
-  @include generate-brand-color('instagram', 'instagram');
-  
-  // Special background effects
-  @include dark-variant('bg-blur-extra', 'backdrop-filter', blur(var(--extra)));
-  @include dark-variant('bg-blur-big', 'backdrop-filter', blur(var(--big)));
-  @include dark-variant('bg-blur-semi', 'backdrop-filter', blur(var(--semi)));
-  @include dark-variant('bg-blur-medium', 'backdrop-filter', blur(var(--medium)));
-  @include dark-variant('bg-blur-regular', 'backdrop-filter', blur(var(--regular)));
-  @include dark-variant('bg-blur-small', 'backdrop-filter', blur(var(--small)));
-  @include dark-variant('bg-blur-thin', 'backdrop-filter', blur(var(--thin)));
-  
-  // Gradients
-  @include dark-variant('bg-black-grad', 'background', linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%));
-  @include dark-variant('bg-grad-main', 'background', radial-gradient(84.52% 84.52% at 50% 50%, rgb(var(--main)) 23.39%, #E7FFF4 100%));
-  @include dark-variant('bg-grad-white', 'background', linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%));
-  
-  // Transparent backgrounds
-  @include dark-variant('bg-t-white', 'background', rgba(var(--white), 0.1));
-  @include dark-variant('bg-t-grey', 'background', rgba(var(--grey), 0.1));
-  @include dark-variant('bg-t-darkgrey', 'background', rgba(var(--darkgrey), 0.1));
-  @include dark-variant('bg-transp', 'background', rgba(var(--white), 0));
-  
-  // Video background (no dark variant needed)
-  .bg-video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    object-fit: cover;
-  }
-  
-  // Additional text utilities
-  @include dark-variant('t-transp', 'opacity', 0.5);
-  @include dark-variant('t-violet', 'color', violet);
-  @include dark-variant('t-blue', 'color', #0057FF);
-  
-  // Additional fills
-  @include dark-variant('fill-l-main', 'fill', var(--light-main));
-  @include dark-variant('fill-card', 'fill', #F7F7F7);
-  @include dark-variant('fill-card-blue', 'fill', #eef2f6);
-  @include dark-variant('fill-t-white', 'fill', rgba(var(--white), 0.1));
-  @include dark-variant('fill-t-grey', 'fill', rgba(var(--grey), 0.1));
-  @include dark-variant('fill-t-darkgrey', 'fill', rgba(var(--darkgrey), 0.1));
-  @include dark-variant('fill-transp', 'fill', rgba(var(--white), 0));
-  @include dark-variant('fill-blue', 'fill', #0057FF);
-  @include dark-variant('fill-light-blue', 'fill', #4E8AFF);
-  @include dark-variant('fill-lightblue', 'fill', linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%));
-  @include dark-variant('fill-light-red', 'fill', var(--light-red));
-}
+// ============================================================================
+// TYPOGRAPHY
+// ============================================================================
+body { font-family: var(--font); }
+a, button { font-family: var(--font-main); }
+a { transition: all 0.233s ease; }
+a:hover { cursor: pointer; }
+b { font-weight: 600; }
+
+h1,h2,h3,h4,h5,span,p { text-box: trim-both cap alphabetic; }
+
+h1,.h1 { font-family: var(--font-main); font-weight: 500; font-size: clamp(3.250rem, 5vw, 4.000rem); line-height: 1.000; letter-spacing: -0.05rem; text-transform: none; }
+h2,.h2 { font-family: var(--font-main); font-weight: 500; font-size: clamp(2.000rem, 5vw, 3.250rem); line-height: 1.125; letter-spacing: -0.05rem; text-transform: none; }
+h3,.h3 { font-family: var(--font-main); font-weight: 500; font-size: clamp(1.500rem, 5vw, 2.000rem); line-height: 1.250; letter-spacing: -0.05rem; text-transform: none; }
+h4,.h4 { font-family: var(--font-main); font-weight: 500; font-size: clamp(1.250rem, 5vw, 1.500rem); letter-spacing: 0; text-transform: none; }
+h5,.h5 { font-family: var(--font-main); font-weight: 500; font-size: clamp(1.000rem, 5vw, 1.250rem); letter-spacing: 0; text-transform: none; }
+
+.p-nano   { font-family: var(--font-second); font-weight: 400; font-size: 0.625rem; line-height: 1.25; }
+.p-micro  { font-family: var(--font-second); font-weight: 400; font-size: 0.750rem; line-height: 1.25; }
+.p-small  { font-family: var(--font-second); font-weight: 400; font-size: 0.875rem; line-height: 1.25; }
+p,.p-regular { font-family: var(--font-second); font-weight: 400; font-size: 1.000rem; line-height: 1.25; }
+.p-medium { font-family: var(--font-second); font-weight: 400; font-size: 1.125rem; line-height: 1.25; }
+.p-semi   { font-family: var(--font-second); font-weight: 400; font-size: 1.250rem; line-height: 1.25; }
+.p-big    { font-family: var(--font-second); font-weight: 400; font-size: 1.375rem; line-height: 1.25; }
+.p-extra  { font-family: var(--font-second); font-weight: 400; font-size: 1.500rem; line-height: 1.25; }
+
+.font-main { font-family: var(--font-main); }
+.font-second { font-family: var(--font-second); }
+
+.text-box-none { text-box: none; }
+.text-box-auto { text-box: auto; }
+.text-box-trim { text-box: trim-both cap alphabetic; }
+.text-box-trim-end { text-box: trim-end cap alphabetic; }
+.trimmed > * { text-box: trim-both cap alphabetic; overflow: visible; }
+}