chore: bump version to 2.4.9

app/globals.css

@@ -1,121 +0,0 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-
-@config "../tailwind.config.cjs";
-
-/* E-TIB Custom Utilities */
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-  
-  .hide-scrollbar {
-    -ms-overflow-style: none !important;  /* IE and Edge */
-    scrollbar-width: none !important;  /* Firefox */
-  }
-  .hide-scrollbar::-webkit-scrollbar {
-    display: none !important; /* Chrome, Safari and Opera */
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  @keyframes bg-pulse-15 {
-    0%, 90%, 100% { opacity: 0.04; }
-    95% { opacity: 0.10; filter: brightness(1.2); }
-  }
-  @keyframes bg-pulse-20 {
-    0%, 90%, 100% { opacity: 0.07; }
-    95% { opacity: 0.14; filter: brightness(1.2); }
-  }
-  .animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; }
-  .animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; }
-}
-
-/* Base Styles */
-@layer base {
-  html {
-    scroll-behavior: smooth;
-  }
-  body {
-    @apply bg-neutral font-sans text-neutral-dark antialiased;
-  }
-  /* Interactive elements pointer */
-  a,
-  button,
-  [role="button"],
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"],
-  select,
-  summary,
-  label[for] {
-    cursor: pointer;
-  }
-
-  /* Ensure disabled elements don't show pointer */
-  button:disabled,
-  [role="button"]:disabled,
-  input:disabled,
-  select:disabled,
-  button[disabled] {
-    cursor: not-allowed;
-  }
-
-  /* Custom Modern Scrollbar */
-  ::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(14, 122, 92, 0.4);
-    border-radius: 10px;
-    border: 4px solid transparent;
-    background-clip: padding-box;
-    transition: background-color 0.2s ease;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(14, 122, 92, 0.8);
-  }
-
-  /* Firefox */
-  html {
-    scrollbar-color: rgba(14, 122, 92, 0.5) transparent;
-    scrollbar-width: thin;
-  }
-}
-/* trigger rebuild */
-
-@layer utilities {
-  @keyframes hero-fade-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  
-  .animate-hero-fade-in-up {
-    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  }
-}
-
-@layer utilities {
-  @keyframes hero-zoom-out {
-    from {
-      transform: scale(1.05);
-    }
-    to {
-      transform: scale(1);
-    }
-  }
-  
-  .animate-hero-zoom-out {
-    animation: hero-zoom-out 1.5s ease-out forwards;
-  }
-}

next.config.mjs

@@ -15,7 +15,7 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
-    inlineCss: true,
+    inlineCss: false,
     staleTimes: {
       dynamic: 0,
       static: 30,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "e-tib-nextjs",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "type": "module",
   "private": true,
   "packageManager": "pnpm@10.18.3",

styles/globals.css

@@ -1,378 +1,267 @@
-@import 'tailwindcss';
-@config "../tailwind.config.cjs";
+@import "tailwindcss";
+
+
+
 
 @theme {
-  --font-sans:
-    var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
+  /* Breakpoints */
+  --breakpoint-xs: 475px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1400px;
+  --breakpoint-3xl: 1600px;
+
+  /* Brand Colors */
+  --color-primary: #0e7a5c;
+  --color-primary-dark: #0a5742;
+  --color-primary-light: #149d76;
+
+  --color-secondary: #194f3b;
+  --color-secondary-light: #20654c;
+  --color-secondary-dark: #13392a;
+
+  --color-accent: #0e7a5c;
+  --color-accent-light: #149d76;
+
+  --color-neutral: #fafafa;
+  --color-neutral-light: #ffffff;
+  --color-neutral-dark: #333333;
+  --color-neutral-black: #1a1a1a;
+
+  /* Text Colors */
+  --color-text-primary: #1a1a1a;
+  --color-text-secondary: #6c757d;
+  --color-text-light: #adb5bd;
+
+  /* Semantic Colors */
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-danger: #dc3545;
+  --color-info: #17a2b8;
+
+  /* Fonts */
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
-  --color-primary: #0e7a5c;
-  /* Deep Teal/Green */
-  --color-primary-dark: #084c39;
-  --color-primary-light: #e6f5f0;
+  /* Typography */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.6;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.6;
+  --text-base: 1rem;
+  --text-base--line-height: 1.7;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.7;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.6;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.5;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 1.4;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 1.3;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1.25;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1.2;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1.15;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1.1;
 
-  --color-saturated: #10a379;
-  /* Saturated Teal Accent */
+  /* Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
 
-  --color-secondary: #003d82;
-  --color-secondary-light: #0056b3;
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
 
-  --color-accent: #10a379;
-  /* Brand Aligned Accent */
-  --color-accent-dark: #0e7a5c;
-  --color-accent-light: #e6f5f0;
-
-  --color-neutral: #f8f9fa;
-  --color-neutral-light: #ffffff;
-  --color-neutral-dark: #0a0a0a;
-  --color-neutral-medium: #e5e7eb;
-
-  --color-text-primary: #111827;
-  --color-text-secondary: #4b5563;
-  --color-text-light: #9ca3af;
-
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #ffffff;
-  --color-info: #3b82f6;
-
-  --animate-fade-in: fade-in 0.5s ease-out;
-  --animate-slide-up: slide-up 0.6s ease-out;
-  --animate-slow-zoom: slow-zoom 20s linear infinite;
-  --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
-    cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-gradient-x: gradient-x 15s ease infinite;
-  --animate-draw-stroke: draw-stroke 1.8s ease-in-out 0.5s forwards;
-
-  @keyframes draw-stroke {
-    from {
-      stroke-dasharray: 1;
-      stroke-dashoffset: 1;
-    }
-
-    to {
-      stroke-dasharray: 1;
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes gradient-x {
-    0%,
-    100% {
-      background-position: 0% 50%;
-    }
-
-    50% {
-      background-position: 100% 50%;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slow-zoom {
-    from {
-      transform: scale(1);
-    }
-
-    to {
-      transform: scale(1.1);
-    }
-  }
-
-  @keyframes reveal {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-      filter: blur(8px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-      filter: blur(0);
-    }
-  }
-
-  @keyframes slight-fade-in-from-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-      filter: blur(4px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-      filter: blur(0);
-    }
-  }
-
-  @keyframes float {
-    0% {
-      transform: translate(0, 0) scale(1);
-    }
-
-    33% {
-      transform: translate(2%, 4%) scale(1.1);
-    }
-
-    66% {
-      transform: translate(-3%, 2%) scale(0.9);
-    }
-
-    100% {
-      transform: translate(0, 0) scale(1);
-    }
-  }
-
-  @keyframes spin-slow {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes flow {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes solar-pulse {
-    0%,
-    100% {
-      fill-opacity: 0.2;
-    }
-
-    50% {
-      fill-opacity: 0.5;
-    }
-  }
+  /* Box Shadow */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
-@layer base {
-  html {
-    /* Scale text down slightly on mobile (87.5% of 16px = 14px) */
-    font-size: 87.5%;
-  }
-
-  @media (min-width: 768px) {
-    html {
-      /* Normal scaling on tablet and desktop (100% = 16px) */
-      font-size: 100%;
-    }
-  }
-
-  .bg-primary a,
-  .bg-primary-dark a {
-    @apply text-white/90 hover:text-white transition-colors;
-  }
-
-  body {
-    @apply text-base md:text-lg antialiased;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: 1.7;
-  }
-
-  *:focus-visible {
-    outline: 3px solid var(--color-primary);
-    outline-offset: 3px;
-    border-radius: 2px;
-  }
-
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply font-heading font-bold tracking-tight;
-  }
-
-  /* Enhanced Mobile-first typography hierarchy with fluid sizing */
-  h1 {
-    @apply text-3xl md:text-5xl lg:text-6xl;
-  }
-
-  h2 {
-    @apply text-2xl md:text-4xl lg:text-5xl;
-  }
-
-  h3 {
-    @apply text-xl md:text-2xl lg:text-3xl;
-  }
-
-  h4 {
-    @apply text-lg md:text-xl lg:text-2xl;
-  }
-
-  h5 {
-    @apply text-base md:text-lg;
-  }
-
-  h6 {
-    @apply text-sm md:text-base;
-  }
-
-  /* Paragraph and text styles */
-  p {
-    @apply mb-4 leading-relaxed;
-  }
-
-  /* Link styles */
-  a {
-    @apply transition-all duration-200;
-  }
-
-  /* List styles */
-  ul,
-  ol {
-    @apply my-4 ml-6;
-  }
-
-  li {
-    @apply mb-2 leading-relaxed;
-  }
-
-  /* Small text */
-  small {
-    @apply text-sm md:text-base;
-  }
-
-  /* Strong and emphasis */
-  strong {
-    @apply font-bold;
-  }
-
-  em {
-    @apply italic;
-  }
-
-  /* Blockquote */
-  blockquote {
-    @apply border-l-4 pl-6 my-6 italic;
-  }
-
-  /* Code */
-  code {
-    @apply px-2 py-1 rounded font-mono text-sm;
-  }
-
-  /* Horizontal rule */
-  hr {
-    @apply my-8;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
-  }
-
-  .image-overlay-gradient {
-    @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent;
-  }
-
-  .premium-card {
-    @apply bg-white rounded-3xl shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
-  }
-
-  .sticky-narrative-container {
-    @apply grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20;
-  }
-
-  .sticky-narrative-sidebar {
-    @apply lg:col-span-4 lg:sticky lg:top-32 h-fit;
-  }
-
-  .sticky-narrative-content {
-    @apply lg:col-span-8;
-  }
-}
-
-/* Custom Utilities */
+/* Custom Utilities (from JS plugins) */
 @utility touch-target {
-  min-height: 48px;
-  /* Increased for better touch-first feel */
-  min-width: 48px;
+  min-height: 44px;
+  min-width: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-@utility reveal-on-scroll {
-  opacity: 0;
-  transform: translateY(20px);
-  filter: blur(8px);
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
-    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-
-  &.is-visible {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    opacity: 1;
-    transform: none !important;
-    filter: none !important;
-    transition: opacity 0.3s ease-out;
+@utility mobile-hidden {
+  @media (max-width: 767px) {
+    display: none !important;
   }
 }
 
-@utility hover-effect {
-  @media (hover: hover) {
-    @apply transition-all duration-300 hover:scale-105;
+@utility tablet-hidden {
+  @media (min-width: 768px) and (max-width: 1023px) {
+    display: none !important;
+  }
+}
+
+@utility desktop-hidden {
+  @media (min-width: 1024px) {
+    display: none !important;
+  }
+}
+
+@utility mobile-only {
+  @media (min-width: 768px) {
+    display: none !important;
+  }
+}
+
+@utility tablet-only {
+  @media (max-width: 767px), (min-width: 1024px) {
+    display: none !important;
+  }
+}
+
+@utility desktop-only {
+  @media (max-width: 1023px) {
+    display: none !important;
   }
 }
 
 @utility fluid-spacing {
-  padding: clamp(1.5rem, 5vw, 5rem);
-  margin: clamp(1rem, 3vw, 3rem);
+  padding: clamp(1rem, 3vw, 3rem);
+  margin: clamp(0.5rem, 2vw, 2rem);
+}
+
+@utility text-start-mobile {
+  @media (max-width: 767px) {
+    text-align: left;
+  }
+}
+
+@utility text-center-mobile {
+  @media (max-width: 767px) {
+    text-align: center;
+  }
+}
+
+@utility text-end-mobile {
+  @media (max-width: 767px) {
+    text-align: right;
+  }
 }
 
 @utility grid-mobile-stacked {
-  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12;
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 }
 
 @utility safe-area-p {
-  padding-top: max(1rem, env(safe-area-inset-top));
-  padding-bottom: max(1rem, env(safe-area-inset-bottom));
-  padding-left: max(1rem, env(safe-area-inset-left));
-  padding-right: max(1rem, env(safe-area-inset-right));
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 }
 
-@utility content-visibility-auto {
-  content-visibility: auto;
-  contain-intrinsic-size: 1px 1000px;
+/* E-TIB Custom Utilities (from previous globals.css) */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .hide-scrollbar {
+    -ms-overflow-style: none !important;  /* IE and Edge */
+    scrollbar-width: none !important;  /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none !important; /* Chrome, Safari and Opera */
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  @keyframes bg-pulse-15 {
+    0%, 90%, 100% { opacity: 0.04; }
+    95% { opacity: 0.10; filter: brightness(1.2); }
+  }
+  @keyframes bg-pulse-20 {
+    0%, 90%, 100% { opacity: 0.07; }
+    95% { opacity: 0.14; filter: brightness(1.2); }
+  }
+  .animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; }
+  .animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; }
+
+  @keyframes hero-fade-in-up {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .animate-hero-fade-in-up {
+    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  @keyframes hero-zoom-out {
+    from { transform: scale(1.05); }
+    to { transform: scale(1); }
+  }
+  .animate-hero-zoom-out {
+    animation: hero-zoom-out 1.5s ease-out forwards;
+  }
+}
+
+/* Base Styles */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-neutral font-sans text-neutral-dark antialiased;
+  }
+  
+  /* Interactive elements pointer */
+  a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], select, summary, label[for] {
+    cursor: pointer;
+  }
+
+  /* Ensure disabled elements don't show pointer */
+  button:disabled, [role="button"]:disabled, input:disabled, select:disabled, button[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* Custom Modern Scrollbar */
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(14, 122, 92, 0.4);
+    border-radius: 10px;
+    border: 4px solid transparent;
+    background-clip: padding-box;
+    transition: background-color 0.2s ease;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 122, 92, 0.8);
+  }
+
+  /* Firefox */
+  html {
+    scrollbar-color: rgba(14, 122, 92, 0.5) transparent;
+    scrollbar-width: thin;
+  }
 }

tailwind.config.cjs

@@ -1,226 +0,0 @@
-/* eslint-disable no-undef */
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './content/**/*.{mdx,md}',
-    './node_modules/@mintel/annotator/dist/**/*.{js,ts,jsx,tsx,mjs}',
-    './node_modules/.pnpm/@mintel+annotator*/node_modules/@mintel/annotator/dist/**/*.{js,ts,jsx,tsx,mjs}'
-  ],
-  theme: {
-    extend: {
-      // Custom Breakpoints for KLZ Cables
-      screens: {
-        'xs': '475px',
-        'sm': '640px',
-        'md': '768px',
-        'lg': '1024px',
-        'xl': '1280px',
-        '2xl': '1400px',
-        '3xl': '1600px',
-      },
-      colors: {
-        // Brand Colors
-        primary: {
-          DEFAULT: '#0e7a5c',
-          dark: '#0a5742',
-          light: '#149d76',
-        },
-        secondary: {
-          DEFAULT: '#194f3b',
-          light: '#20654c',
-          dark: '#13392a',
-        },
-        accent: {
-          DEFAULT: '#0e7a5c',
-          light: '#149d76',
-        },
-        neutral: {
-          DEFAULT: '#fafafa',
-          light: '#ffffff',
-          dark: '#333333',
-          black: '#1a1a1a',
-        },
-        // Text Colors
-        text: {
-          primary: '#1a1a1a',
-          secondary: '#6c757d',
-          light: '#adb5bd',
-        },
-        // Semantic Colors
-        success: '#28a745',
-        warning: '#ffc107',
-        danger: '#dc3545',
-        info: '#17a2b8',
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
-        heading: ['Inter', 'system-ui', 'sans-serif'],
-        body: ['Inter', 'system-ui', 'sans-serif'],
-      },
-      // Standard Fluid Typography
-      // Responsive scaling is handled globally via the html selector percentage in globals.css
-      fontSize: {
-        'xs': ['0.75rem', { lineHeight: '1.6' }],
-        'sm': ['0.875rem', { lineHeight: '1.6' }],
-        'base': ['1rem', { lineHeight: '1.7' }],
-        'lg': ['1.125rem', { lineHeight: '1.7' }],
-        'xl': ['1.25rem', { lineHeight: '1.6' }],
-        '2xl': ['1.5rem', { lineHeight: '1.5' }],
-        '3xl': ['1.875rem', { lineHeight: '1.4' }],
-        '4xl': ['2.25rem', { lineHeight: '1.3' }],
-        '5xl': ['3rem', { lineHeight: '1.25' }],
-        '6xl': ['3.75rem', { lineHeight: '1.2' }],
-        '7xl': ['4.5rem', { lineHeight: '1.15' }],
-        '8xl': ['6rem', { lineHeight: '1.1' }],
-      },
-      fontWeight: {
-        regular: '400',
-        medium: '500',
-        semibold: '600',
-        bold: '700',
-        extrabold: '800',
-      },
-      borderRadius: {
-        'sm': '0.25rem',
-        'DEFAULT': '0.5rem',
-        'lg': '0.75rem',
-        'xl': '1rem',
-        '2xl': '1.5rem',
-      },
-      boxShadow: {
-        'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-        'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-        'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      },
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: '1rem',
-          sm: '1.5rem',
-          md: '2rem',
-          lg: '2.5rem',
-          xl: '3rem',
-          '2xl': '4rem',
-        },
-        screens: {
-          xs: '475px',
-          sm: '640px',
-          md: '768px',
-          lg: '1024px',
-          xl: '1280px',
-          '2xl': '1400px',
-          '3xl': '1600px',
-        },
-      },
-      maxWidth: {
-        'xs': '20rem',
-        'sm': '24rem',
-        'md': '28rem',
-        'lg': '32rem',
-        'xl': '36rem',
-        '2xl': '42rem',
-        '3xl': '48rem',
-        '4xl': '56rem',
-        '5xl': '64rem',
-        '6xl': '72rem',
-      },
-      zIndex: {
-        '0': '0',
-        '10': '10',
-        '20': '20',
-        '30': '30',
-        '40': '40',
-        '50': '50',
-        'auto': 'auto',
-      },
-    },
-  },
-  plugins: [
-    // Custom plugin for responsive utilities
-    function ({ addUtilities }) {
-      const newUtilities = {
-        // Touch target utilities
-        '.touch-target': {
-          minHeight: '44px',
-          minWidth: '44px',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        // Mobile-first responsive utilities
-        '.mobile-hidden': {
-          '@media (max-width: 767px)': {
-            display: 'none !important',
-          },
-        },
-        '.tablet-hidden': {
-          '@media (min-width: 768px) and (max-width: 1023px)': {
-            display: 'none !important',
-          },
-        },
-        '.desktop-hidden': {
-          '@media (min-width: 1024px)': {
-            display: 'none !important',
-          },
-        },
-        '.mobile-only': {
-          '@media (min-width: 768px)': {
-            display: 'none !important',
-          },
-        },
-        '.tablet-only': {
-          '@media (max-width: 767px), (min-width: 1024px)': {
-            display: 'none !important',
-          },
-        },
-        '.desktop-only': {
-          '@media (max-width: 1023px)': {
-            display: 'none !important',
-          },
-        },
-        // Fluid spacing utilities
-        '.fluid-spacing': {
-          padding: 'clamp(1rem, 3vw, 3rem)',
-          margin: 'clamp(0.5rem, 2vw, 2rem)',
-        },
-        // Responsive text alignment
-        '.text-start-mobile': {
-          '@media (max-width: 767px)': {
-            textAlign: 'left',
-          },
-        },
-        '.text-center-mobile': {
-          '@media (max-width: 767px)': {
-            textAlign: 'center',
-          },
-        },
-        '.text-end-mobile': {
-          '@media (max-width: 767px)': {
-            textAlign: 'right',
-          },
-        },
-        // Mobile-optimized grid
-        '.grid-mobile-stacked': {
-          '@media (max-width: 767px)': {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1rem',
-          },
-        },
-        // Safe area padding for mobile notch
-        '.safe-area-p': {
-          paddingTop: 'env(safe-area-inset-top)',
-          paddingBottom: 'env(safe-area-inset-bottom)',
-          paddingLeft: 'env(safe-area-inset-left)',
-          paddingRight: 'env(safe-area-inset-right)',
-        },
-      };
-
-      addUtilities(newUtilities, ['responsive', 'hover', 'focus']);
-    },
-  ],
-}