@import 'tailwindcss';
@config '../../tailwind.config.mjs';
@import 'rippleui/dist/css/components.css';

@custom-variant dark (&:is([data-theme='dark'] *));

@plugin "@tailwindcss/typography";

@source inline("lg:col-span-4");
@source inline("lg:col-span-6");
@source inline("lg:col-span-8");
@source inline("lg:col-span-12");
@source inline("hero-section");
@source inline("hero-content");
@source inline("bg-slate-900");
@source inline("table-hover");
@source inline("menu-active");
@source inline("sidebar-sticky");

@theme {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 86rem;
}

:root {
  --primary: 82 108 236;
  --secondary: 100 116 139;
  --backgroundPrimary: 252 252 252;
  --backgroundSecondary: 246 246 248;
  --border: 220 220 228;
  --content1: 20 20 30;
  --content2: 80 80 95;
  --content3: 140 140 155;
  --success: 34 197 94;
  --warning: 234 179 8;
  --error: 239 68 68;
  --gray-1: 250 250 252;
  --gray-2: 246 246 248;
  --gray-3: 238 238 243;
  --gray-4: 228 228 235;
  --gray-5: 212 212 222;
  --gray-6: 190 190 203;
  --gray-7: 160 160 176;
  --gray-8: 120 120 138;
  --gray-9: 85 85 100;
  --gray-10: 60 60 75;
  --gray-11: 35 35 50;
  --gray-12: 15 15 25;
  --whiteInverted: 0 0 0;
  --blackInverted: 255 255 255;
}

[data-theme='dark'] {
  --primary: 99 120 255;
  --secondary: 148 163 184;
  --backgroundPrimary: 18 18 20;
  --backgroundSecondary: 26 26 30;
  --border: 45 45 52;
  --content1: 228 228 232;
  --content2: 155 155 165;
  --content3: 95 95 108;
  --success: 34 197 94;
  --warning: 234 179 8;
  --error: 239 68 68;
  --gray-1: 22 22 26;
  --gray-2: 28 28 32;
  --gray-3: 36 36 42;
  --gray-4: 46 46 54;
  --gray-5: 58 58 68;
  --gray-6: 72 72 85;
  --gray-7: 92 92 108;
  --gray-8: 118 118 136;
  --gray-9: 148 148 165;
  --gray-10: 180 180 195;
  --gray-11: 208 208 220;
  --gray-12: 238 238 245;
  --whiteInverted: 255 255 255;
  --blackInverted: 0 0 0;
}

@layer base {
  body { background: rgb(var(--backgroundPrimary)); color: rgb(var(--content1)); }
  h1, h2, h3, h4, h5, h6 { font-weight: unset; font-size: unset; }
}

@layer utilities {
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @variant md { .container { max-width: var(--breakpoint-md); padding-inline: 2rem; } }
  @variant lg { .container { max-width: var(--breakpoint-lg); } }
  @variant xl { .container { max-width: var(--breakpoint-xl); } }
  @variant 2xl { .container { max-width: var(--breakpoint-2xl); } }
}

@layer utilities {
  .hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #fff;
  }
  .hero-content h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #fff;
  }
  .hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.9);
  }
}


/* === Semantic theme utility classes (RippleUI variable aliases) === */
.bg-background { background-color: rgb(var(--backgroundPrimary)); }
.bg-background\/95 { background-color: rgb(var(--backgroundPrimary) / 0.95); }
.bg-background\/60 { background-color: rgb(var(--backgroundPrimary) / 0.60); }
.text-foreground { color: rgb(var(--content1)); }
.text-primary { color: rgb(var(--primary)); }
.text-muted-foreground { color: rgb(var(--content2)); }
.border-border { border-color: rgb(var(--border)); }
.border-border\/30 { border-color: rgb(var(--border) / 0.30); }
.hover\:text-primary:hover { color: rgb(var(--primary)); }
.hover\:text-foreground:hover { color: rgb(var(--content1)); }