zenkit-css 1.0.0

package/scss/utilities/_borders.scss

@@ -0,0 +1,246 @@
+// ========================================
+// ZenKit - Border Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Border Width
+// ----------------------------------------
+.border { border: $border-width solid var(--border); }
+.border-0 { border-width: 0; }
+.border-2 { border-width: 2px; }
+.border-4 { border-width: 4px; }
+.border-8 { border-width: 8px; }
+
+.border-t { border-top: $border-width solid var(--border); }
+.border-r { border-right: $border-width solid var(--border); }
+.border-b { border-bottom: $border-width solid var(--border); }
+.border-l { border-left: $border-width solid var(--border); }
+
+.border-t-0 { border-top-width: 0; }
+.border-r-0 { border-right-width: 0; }
+.border-b-0 { border-bottom-width: 0; }
+.border-l-0 { border-left-width: 0; }
+
+.border-t-2 { border-top-width: 2px; }
+.border-r-2 { border-right-width: 2px; }
+.border-b-2 { border-bottom-width: 2px; }
+.border-l-2 { border-left-width: 2px; }
+
+.border-x {
+  border-left: $border-width solid var(--border);
+  border-right: $border-width solid var(--border);
+}
+
+.border-y {
+  border-top: $border-width solid var(--border);
+  border-bottom: $border-width solid var(--border);
+}
+
+// ----------------------------------------
+// Border Color
+// ----------------------------------------
+.border-transparent { border-color: transparent; }
+.border-current { border-color: currentColor; }
+.border-inherit { border-color: inherit; }
+
+.border-primary { border-color: var(--primary); }
+.border-primary-200 { border-color: var(--primary-200); }
+.border-primary-300 { border-color: var(--primary-300); }
+.border-primary-500 { border-color: var(--primary-500); }
+.border-primary-700 { border-color: var(--primary-700); }
+
+.border-gray-100 { border-color: var(--gray-100); }
+.border-gray-200 { border-color: var(--gray-200); }
+.border-gray-300 { border-color: var(--gray-300); }
+.border-gray-400 { border-color: var(--gray-400); }
+.border-gray-500 { border-color: var(--gray-500); }
+.border-gray-600 { border-color: var(--gray-600); }
+.border-gray-700 { border-color: var(--gray-700); }
+.border-gray-800 { border-color: var(--gray-800); }
+
+.border-success { border-color: var(--success); }
+.border-warning { border-color: var(--warning); }
+.border-danger { border-color: var(--danger); }
+.border-info { border-color: var(--info); }
+
+.border-white { border-color: var(--white); }
+.border-black { border-color: var(--black); }
+
+// ----------------------------------------
+// Border Style
+// ----------------------------------------
+.border-solid { border-style: solid; }
+.border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
+.border-double { border-style: double; }
+.border-hidden { border-style: hidden; }
+.border-none { border-style: none; }
+
+// ----------------------------------------
+// Border Radius
+// ----------------------------------------
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded { border-radius: var(--radius); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-2xl { border-radius: var(--radius-2xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+// Top
+.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
+.rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
+.rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
+.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
+.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
+.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
+
+// Bottom
+.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.rounded-b-sm { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+.rounded-b { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
+.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
+.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
+
+// Left
+.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
+.rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
+.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
+.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
+
+// Right
+.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+.rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
+.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
+
+// Individual corners
+.rounded-tl-none { border-top-left-radius: 0; }
+.rounded-tr-none { border-top-right-radius: 0; }
+.rounded-bl-none { border-bottom-left-radius: 0; }
+.rounded-br-none { border-bottom-right-radius: 0; }
+
+.rounded-tl { border-top-left-radius: var(--radius); }
+.rounded-tr { border-top-right-radius: var(--radius); }
+.rounded-bl { border-bottom-left-radius: var(--radius); }
+.rounded-br { border-bottom-right-radius: var(--radius); }
+
+.rounded-tl-lg { border-top-left-radius: var(--radius-lg); }
+.rounded-tr-lg { border-top-right-radius: var(--radius-lg); }
+.rounded-bl-lg { border-bottom-left-radius: var(--radius-lg); }
+.rounded-br-lg { border-bottom-right-radius: var(--radius-lg); }
+
+// ----------------------------------------
+// Divide
+// ----------------------------------------
+.divide-x > * + * {
+  border-left: $border-width solid var(--border);
+}
+
+.divide-y > * + * {
+  border-top: $border-width solid var(--border);
+}
+
+.divide-x-2 > * + * {
+  border-left-width: 2px;
+}
+
+.divide-y-2 > * + * {
+  border-top-width: 2px;
+}
+
+.divide-x-reverse > * + * {
+  border-right: $border-width solid var(--border);
+  border-left: 0;
+}
+
+.divide-y-reverse > * + * {
+  border-bottom: $border-width solid var(--border);
+  border-top: 0;
+}
+
+// Divide colors
+.divide-primary > * + * { border-color: var(--primary); }
+.divide-gray-200 > * + * { border-color: var(--gray-200); }
+.divide-gray-300 > * + * { border-color: var(--gray-300); }
+
+// ----------------------------------------
+// Outline
+// ----------------------------------------
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.outline {
+  outline-style: solid;
+}
+
+.outline-dashed {
+  outline-style: dashed;
+}
+
+.outline-dotted {
+  outline-style: dotted;
+}
+
+.outline-0 { outline-width: 0; }
+.outline-1 { outline-width: 1px; }
+.outline-2 { outline-width: 2px; }
+.outline-4 { outline-width: 4px; }
+
+.outline-offset-0 { outline-offset: 0; }
+.outline-offset-1 { outline-offset: 1px; }
+.outline-offset-2 { outline-offset: 2px; }
+.outline-offset-4 { outline-offset: 4px; }
+
+// ----------------------------------------
+// Ring (Focus Ring)
+// ----------------------------------------
+.ring {
+  box-shadow: 0 0 0 3px rgba($primary, 0.3);
+}
+
+.ring-0 {
+  box-shadow: 0 0 0 0 transparent;
+}
+
+.ring-1 {
+  box-shadow: 0 0 0 1px var(--primary);
+}
+
+.ring-2 {
+  box-shadow: 0 0 0 2px var(--primary);
+}
+
+.ring-4 {
+  box-shadow: 0 0 0 4px var(--primary);
+}
+
+.ring-primary {
+  --ring-color: var(--primary);
+}
+
+.ring-gray-300 {
+  --ring-color: var(--gray-300);
+}
+
+.ring-offset-0 { --ring-offset: 0; }
+.ring-offset-1 { --ring-offset: 1px; }
+.ring-offset-2 { --ring-offset: 2px; }
+
+// ----------------------------------------
+// Border Opacity
+// ----------------------------------------
+.border-opacity-10 { --border-opacity: 0.1; }
+.border-opacity-25 { --border-opacity: 0.25; }
+.border-opacity-50 { --border-opacity: 0.5; }
+.border-opacity-75 { --border-opacity: 0.75; }
+.border-opacity-100 { --border-opacity: 1; }

package/scss/utilities/_colors.scss

@@ -0,0 +1,194 @@
+// ========================================
+// ZenKit - Color Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Text Colors
+// ----------------------------------------
+.text-primary { color: var(--primary); }
+.text-primary-50 { color: var(--primary-50); }
+.text-primary-100 { color: var(--primary-100); }
+.text-primary-200 { color: var(--primary-200); }
+.text-primary-300 { color: var(--primary-300); }
+.text-primary-400 { color: var(--primary-400); }
+.text-primary-500 { color: var(--primary-500); }
+.text-primary-600 { color: var(--primary-600); }
+.text-primary-700 { color: var(--primary-700); }
+.text-primary-800 { color: var(--primary-800); }
+.text-primary-900 { color: var(--primary-900); }
+
+.text-gray-50 { color: var(--gray-50); }
+.text-gray-100 { color: var(--gray-100); }
+.text-gray-200 { color: var(--gray-200); }
+.text-gray-300 { color: var(--gray-300); }
+.text-gray-400 { color: var(--gray-400); }
+.text-gray-500 { color: var(--gray-500); }
+.text-gray-600 { color: var(--gray-600); }
+.text-gray-700 { color: var(--gray-700); }
+.text-gray-800 { color: var(--gray-800); }
+.text-gray-900 { color: var(--gray-900); }
+
+.text-success { color: var(--success); }
+.text-warning { color: var(--warning); }
+.text-danger { color: var(--danger); }
+.text-info { color: var(--info); }
+
+.text-white { color: var(--white); }
+.text-black { color: var(--black); }
+
+// Semantic text colors
+.text-body { color: var(--text); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+.text-link { color: var(--link); }
+
+.text-inherit { color: inherit; }
+.text-current { color: currentColor; }
+.text-transparent { color: transparent; }
+
+// ----------------------------------------
+// Background Colors
+// ----------------------------------------
+.bg-primary { background-color: var(--primary); }
+.bg-primary-50 { background-color: var(--primary-50); }
+.bg-primary-100 { background-color: var(--primary-100); }
+.bg-primary-200 { background-color: var(--primary-200); }
+.bg-primary-300 { background-color: var(--primary-300); }
+.bg-primary-400 { background-color: var(--primary-400); }
+.bg-primary-500 { background-color: var(--primary-500); }
+.bg-primary-600 { background-color: var(--primary-600); }
+.bg-primary-700 { background-color: var(--primary-700); }
+.bg-primary-800 { background-color: var(--primary-800); }
+.bg-primary-900 { background-color: var(--primary-900); }
+
+.bg-gray-50 { background-color: var(--gray-50); }
+.bg-gray-100 { background-color: var(--gray-100); }
+.bg-gray-200 { background-color: var(--gray-200); }
+.bg-gray-300 { background-color: var(--gray-300); }
+.bg-gray-400 { background-color: var(--gray-400); }
+.bg-gray-500 { background-color: var(--gray-500); }
+.bg-gray-600 { background-color: var(--gray-600); }
+.bg-gray-700 { background-color: var(--gray-700); }
+.bg-gray-800 { background-color: var(--gray-800); }
+.bg-gray-900 { background-color: var(--gray-900); }
+
+.bg-success { background-color: var(--success); }
+.bg-success-light { background-color: var(--success-light); }
+.bg-warning { background-color: var(--warning); }
+.bg-warning-light { background-color: var(--warning-light); }
+.bg-danger { background-color: var(--danger); }
+.bg-danger-light { background-color: var(--danger-light); }
+.bg-info { background-color: var(--info); }
+.bg-info-light { background-color: var(--info-light); }
+
+.bg-white { background-color: var(--white); }
+.bg-black { background-color: var(--black); }
+
+// Semantic background colors
+.bg-body { background-color: var(--bg); }
+.bg-secondary { background-color: var(--bg-secondary); }
+.bg-card { background-color: var(--bg-card); }
+.bg-muted { background-color: var(--bg-muted); }
+
+.bg-transparent { background-color: transparent; }
+.bg-inherit { background-color: inherit; }
+
+// ----------------------------------------
+// Background Opacity
+// ----------------------------------------
+.bg-opacity-10 { --bg-opacity: 0.1; }
+.bg-opacity-25 { --bg-opacity: 0.25; }
+.bg-opacity-50 { --bg-opacity: 0.5; }
+.bg-opacity-75 { --bg-opacity: 0.75; }
+.bg-opacity-100 { --bg-opacity: 1; }
+
+// ----------------------------------------
+// Text Opacity
+// ----------------------------------------
+.text-opacity-25 { opacity: 0.25; }
+.text-opacity-50 { opacity: 0.5; }
+.text-opacity-75 { opacity: 0.75; }
+.text-opacity-100 { opacity: 1; }
+
+// ----------------------------------------
+// Gradient Backgrounds
+// ----------------------------------------
+.bg-gradient-primary {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
+}
+
+.bg-gradient-dark {
+  background: linear-gradient(135deg, var(--gray-700), var(--gray-900));
+}
+
+.bg-gradient-light {
+  background: linear-gradient(135deg, var(--gray-50), var(--gray-200));
+}
+
+.bg-gradient-success {
+  background: linear-gradient(135deg, $success, darken($success, 15%));
+}
+
+.bg-gradient-danger {
+  background: linear-gradient(135deg, $danger, darken($danger, 15%));
+}
+
+.bg-gradient-warning {
+  background: linear-gradient(135deg, $warning, darken($warning, 15%));
+}
+
+.bg-gradient-info {
+  background: linear-gradient(135deg, $info, darken($info, 15%));
+}
+
+// Gradient directions
+.bg-gradient-to-t { background-image: linear-gradient(to top, var(--gradient-stops)); }
+.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--gradient-stops)); }
+.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops)); }
+.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-stops)); }
+.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--gradient-stops)); }
+.bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--gradient-stops)); }
+.bg-gradient-to-l { background-image: linear-gradient(to left, var(--gradient-stops)); }
+.bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--gradient-stops)); }
+
+// Gradient color stops
+.from-primary { --gradient-from: var(--primary); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); }
+.from-gray-900 { --gradient-from: var(--gray-900); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); }
+.from-transparent { --gradient-from: transparent; --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); }
+
+.to-primary { --gradient-to: var(--primary); }
+.to-gray-900 { --gradient-to: var(--gray-900); }
+.to-transparent { --gradient-to: transparent; }
+
+// ----------------------------------------
+// Hover Colors
+// ----------------------------------------
+.hover\:text-primary:hover { color: var(--primary); }
+.hover\:text-white:hover { color: var(--white); }
+.hover\:text-gray-900:hover { color: var(--gray-900); }
+
+.hover\:bg-primary:hover { background-color: var(--primary); }
+.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
+.hover\:bg-gray-100:hover { background-color: var(--gray-100); }
+.hover\:bg-gray-200:hover { background-color: var(--gray-200); }
+
+// ----------------------------------------
+// Focus Colors
+// ----------------------------------------
+.focus\:text-primary:focus { color: var(--primary); }
+.focus\:bg-primary:focus { background-color: var(--primary); }
+
+// ----------------------------------------
+// Dark Mode Specific
+// ----------------------------------------
+[data-theme="dark"] {
+  .dark\:text-white { color: var(--white); }
+  .dark\:text-gray-100 { color: var(--gray-100); }
+  .dark\:text-gray-400 { color: var(--gray-400); }
+
+  .dark\:bg-gray-800 { background-color: var(--gray-800); }
+  .dark\:bg-gray-900 { background-color: var(--gray-900); }
+}

package/scss/utilities/_display.scss

@@ -0,0 +1,263 @@
+// ========================================
+// ZenKit - Display Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Display
+// ----------------------------------------
+.d-none { display: none; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-block { display: block; }
+.d-flex { display: flex; }
+.d-inline-flex { display: inline-flex; }
+.d-grid { display: grid; }
+.d-inline-grid { display: inline-grid; }
+.d-table { display: table; }
+.d-table-row { display: table-row; }
+.d-table-cell { display: table-cell; }
+.d-contents { display: contents; }
+
+// ----------------------------------------
+// Visibility
+// ----------------------------------------
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+
+// ----------------------------------------
+// Opacity
+// ----------------------------------------
+.opacity-0 { opacity: 0; }
+.opacity-25 { opacity: 0.25; }
+.opacity-50 { opacity: 0.5; }
+.opacity-75 { opacity: 0.75; }
+.opacity-100 { opacity: 1; }
+
+// ----------------------------------------
+// Overflow
+// ----------------------------------------
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+
+// ----------------------------------------
+// Position
+// ----------------------------------------
+.position-static { position: static; }
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+.position-sticky { position: sticky; }
+
+// Shorthand
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+// ----------------------------------------
+// Position Helpers
+// ----------------------------------------
+.inset-0 { inset: 0; }
+.inset-auto { inset: auto; }
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+.top-50 { top: 50%; }
+.left-50 { left: 50%; }
+.top-100 { top: 100%; }
+.left-100 { left: 100%; }
+.right-50 { right: 50%; }
+.right-100 { right: 100%; }
+.bottom-50 { bottom: 50%; }
+.bottom-100 { bottom: 100%; }
+
+// Logical positions (RTL-friendly)
+.start-0 { inset-inline-start: 0; }
+.start-50 { inset-inline-start: 50%; }
+.start-100 { inset-inline-start: 100%; }
+.end-0 { inset-inline-end: 0; }
+.end-50 { inset-inline-end: 50%; }
+.end-100 { inset-inline-end: 100%; }
+
+// ----------------------------------------
+// Translate / Transform
+// ----------------------------------------
+.translate-middle {
+  transform: translate(-50%, -50%);
+}
+
+.translate-middle-x {
+  transform: translateX(-50%);
+}
+
+.translate-middle-y {
+  transform: translateY(-50%);
+}
+
+// ----------------------------------------
+// Float
+// ----------------------------------------
+.float-left { float: left; }
+.float-right { float: right; }
+.float-none { float: none; }
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+// ----------------------------------------
+// Z-Index
+// ----------------------------------------
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+.z-auto { z-index: auto; }
+.z-dropdown { z-index: var(--z-dropdown); }
+.z-sticky { z-index: var(--z-sticky); }
+.z-fixed { z-index: var(--z-fixed); }
+.z-modal { z-index: var(--z-modal); }
+
+// ----------------------------------------
+// Responsive Display
+// ----------------------------------------
+@include sm {
+  .sm\:d-none { display: none; }
+  .sm\:d-inline { display: inline; }
+  .sm\:d-inline-block { display: inline-block; }
+  .sm\:d-block { display: block; }
+  .sm\:d-flex { display: flex; }
+  .sm\:d-inline-flex { display: inline-flex; }
+  .sm\:d-grid { display: grid; }
+}
+
+@include md {
+  .md\:d-none { display: none; }
+  .md\:d-inline { display: inline; }
+  .md\:d-inline-block { display: inline-block; }
+  .md\:d-block { display: block; }
+  .md\:d-flex { display: flex; }
+  .md\:d-inline-flex { display: inline-flex; }
+  .md\:d-grid { display: grid; }
+}
+
+@include lg {
+  .lg\:d-none { display: none; }
+  .lg\:d-inline { display: inline; }
+  .lg\:d-inline-block { display: inline-block; }
+  .lg\:d-block { display: block; }
+  .lg\:d-flex { display: flex; }
+  .lg\:d-inline-flex { display: inline-flex; }
+  .lg\:d-grid { display: grid; }
+}
+
+@include xl {
+  .xl\:d-none { display: none; }
+  .xl\:d-inline { display: inline; }
+  .xl\:d-inline-block { display: inline-block; }
+  .xl\:d-block { display: block; }
+  .xl\:d-flex { display: flex; }
+  .xl\:d-inline-flex { display: inline-flex; }
+  .xl\:d-grid { display: grid; }
+}
+
+// ----------------------------------------
+// Print Utilities
+// ----------------------------------------
+@media print {
+  .d-print-none { display: none !important; }
+  .d-print-block { display: block !important; }
+  .d-print-inline { display: inline !important; }
+  .d-print-inline-block { display: inline-block !important; }
+}
+
+// ----------------------------------------
+// Screen Reader Only
+// ----------------------------------------
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
+// ----------------------------------------
+// RTL Support
+// ----------------------------------------
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+
+// RTL-aware float
+[dir="rtl"] {
+  .float-start { float: right; }
+  .float-end { float: left; }
+}
+
+[dir="ltr"],
+:root:not([dir="rtl"]) {
+  .float-start { float: left; }
+  .float-end { float: right; }
+}
+
+// ----------------------------------------
+// Prefers Color Scheme Detection
+// ----------------------------------------
+@media (prefers-color-scheme: dark) {
+  .dark\:d-none { display: none; }
+  .dark\:d-block { display: block; }
+  .dark\:d-flex { display: flex; }
+}
+
+@media (prefers-color-scheme: light) {
+  .light\:d-none { display: none; }
+  .light\:d-block { display: block; }
+  .light\:d-flex { display: flex; }
+}
+
+// ----------------------------------------
+// Prefers Contrast
+// ----------------------------------------
+@media (prefers-contrast: more) {
+  .contrast\:border-2 { border-width: 2px !important; }
+  .contrast\:font-bold { font-weight: 700 !important; }
+}
+
+// ----------------------------------------
+// Forced Colors Mode (High Contrast)
+// ----------------------------------------
+@media (forced-colors: active) {
+  .forced-colors\:visible { visibility: visible !important; }
+}