:root, :host {
  --font-inter-tight: "Inter Tight", sans-serif;
  
  /* === SPECIFIKIT BRAND PALETTE === */
  /* Primary Indigo/Purple Scale */
  --color-primary: #4338ca;    /* New: Indigo */
  --color-primary-50: #eef2ff;    /* New: Indigo 50 */
  --color-primary-100: #e0e7ff;   /* New: Indigo 100 */
  --color-primary-200: #c7d2fe;   /* New: Indigo 200 */
  --color-primary-300: #a5b4fc;   /* New: Indigo 300 */
  --color-primary-400: #818cf8;   /* New: Indigo 400 */
  --color-primary-500: #6366f1;   /* New: Indigo 500 */
  --color-primary-600: #4f46e5;   /* Main Brand Indigo */
  
  /* Core Colors */
  --color-secondary: #111827;     /* New: Gray 900 (for text) */
  --color-accent: #ffffff;         /* New: White (for high contrast) */
  
  /* Background Scale (Light Mode) */
  --color-background-1: #ffffff;     /* White */
  --color-background-2: #f9fafb;     /* Gray 50 */
  --color-background-3: #f3f4f6;     /* Gray 100 */
  --color-background-4: #e5e7eb;     /* Gray 200 */
  
  /* Background Scale (Dark Mode) */
  --color-background-5: #1f2937;     /* Gray 800 */
  --color-background-6: #111827;     /* Gray 900 */
  --color-background-7: #030712;     /* Gray 950 */
  --color-background-8: #000000;     /* Black */
  
  /* Stroke/Border Scale */
  --color-stroke-1: #e5e7eb;         /* Gray 200 */
  --color-stroke-2: #d1d5db;         /* Gray 300 */
  --color-stroke-3: #9ca3af;         /* Gray 400 */
  --color-stroke-4: #f3f4f6;         /* Gray 100 */
  --color-stroke-5: #374151;         /* Dark: Gray 700 */
  --color-stroke-6: #1f2937;         /* Dark: Gray 800 */
  --color-stroke-7: #4b5569;         /* Dark: Gray 600 */

  /* Notification/Badge Colors (Using Tailwind Palette) */
  --color-ns-yellow: #f59e0b;      /* Amber 500 */
  --color-ns-green: #10b981;       /* Emerald 500 */
  --color-ns-red: #ef4444;         /* Red 500 */
  --color-ns-cyan: #06b6d4;        /* Cyan 500 */
  --color-ns-green-light: #d1fae5; /* Emerald 100 */
  --color-ns-cyan-light: #cffafe;  /* Cyan 100 */
  --color-ns-yellow-light: #fef3c7;/* Amber 100 */

  /* Gradients (Updated with Brand Colors) */
  --color-gradient-1: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-200) 100%);
  --color-gradient-6: linear-gradient(var(--color-ns-cyan) 0%, var(--color-ns-green) 100%);
  --color-gradient-8: linear-gradient(156deg, #fff 32.92%, var(--color-primary-400) 91%);
  
  /* --- Untouched variables below (Typography, Spacing, etc.) --- */
  --color-gradient-5: linear-gradient(165deg, #ffffff80 0.51%, #fff0 64.43%);
  --color-gradient-7: linear-gradient(#fff 0%, #83e7ee 100%);
  --color-gradient-9: linear-gradient(156deg, #dfb0ff 32.92%, #fdbedc 91%);
  --color-gradient-11: linear-gradient(179deg, #fff0 0.68%, #fff 79.47%);
  --color-gradient-12: radial-gradient(73.01% 80.77% at 19.23% 47.79%, #83e7ee 0%, #864ffe00 100%);
  --text-heading-1: 4.25rem;
  --text-heading-1--line-height: 110%;
  --text-heading-2: 3.25rem;
  --text-heading-2--line-height: 120%;
  --text-heading-3: 2.5rem;
  --text-heading-3--line-height: 120%;
  --text-heading-4: 2rem;
  --text-heading-4--line-height: 130%;
  --text-heading-5: 1.5rem;
  --text-heading-5--line-height: 140%;
  --text-heading-6: 1.25rem;
  --text-heading-6--line-height: 140%;
  --text-tagline-1: 1rem;
  --text-tagline-1--line-height: 150%;
  --text-tagline-2: .875rem;
  --text-tagline-2--line-height: 150%;
  --text-tagline-3: .75rem;
  --text-tagline-3--line-height: 150%;
  --blur-ns-badge-blur: 17.2283px;
  --stack-cards-gap: 2rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-400: oklch(70.4% .191 22.216);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-md: 28rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --drop-shadow-2xl: 0 25px 25px #00000026;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-3xl: 64px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

.bg-primary {
    background-color: var(--color-primary);
}

.hover\:bg-secondary:hover {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}
  
.hover\:text-primary:hover {
    color: var(--color-primary);
}

/*
====================================
Button Styles (Specifikit Brand)
====================================
*/

/* --- Primary Button --- */
/* Your main call-to-action. Bold, high-contrast, and on-brand. */
.btn-primary {
  border-color: var(--color-primary-600); /* Main Brand Indigo */
  background-color: var(--color-primary-600); /* Main Brand Indigo */
  color: var(--color-white);
  --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-primary:hover {
  background-color: #4338ca; /* Indigo 700 - Darker shade for hover */
  border-color: #4338ca; /* Indigo 700 */
}
.btn-primary:where(.dark, .dark *) {
  border-color: var(--color-primary-400);
  background-color: var(--color-primary-500);
}
.btn-primary:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- Secondary Button --- */
/* The standard, default button. Clean, clear, but less prominent than primary. */
.btn-secondary {
  border-color: var(--color-stroke-2); /* Gray 300 */
  background-color: var(--color-white);
  color: var(--color-secondary); /* Dark Gray Text */
  --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-secondary:hover {
  background-color: var(--color-background-2); /* Gray 50 */
  border-color: var(--color-stroke-3); /* Gray 400 */
}
.btn-secondary:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23111827' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- Accent Button --- */
/* A subtle, often tertiary action. Can also be used for "ghost" buttons. */
.btn-accent {
  border-color: transparent;
  background-color: var(--color-primary-50); /* Indigo 50 - Very light */
  color: var(--color-primary-600); /* Main Brand Indigo Text */
  --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-accent:hover {
  background-color: var(--color-primary-100); /* Indigo 100 */
}
.btn-accent:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%234F46E5' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- White Button (Example) --- */
/* For use on dark backgrounds. */
.btn-white {
  border-color: var(--color-stroke-3);
  background-color: var(--color-background-1);
  color: var(--color-secondary);
  --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-white:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231a1a1c' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- Green Button (Example) --- */
/* For specific actions like "Success" or "Confirm" */
.btn-green {
  border-color: var(--color-ns-green);
  background-color: var(--color-ns-green);
  color: var(--color-white);
}
.btn-green:hover {
  background-color: #059669; /* Darker Green */
  border-color: #059669;
}
.btn-green:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* Note: I've left btn-white-v2 as it was, assuming it might be a specific variant you need. 
   If it should also be updated, it would likely become another version of btn-secondary. */
.btn-white-v2 {
  border-color: var(--color-stroke-3);
  background-color: var(--color-white);
  color: var(--color-secondary);
  --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-white-v2:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231a1a1c' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

.btn-specifikit {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-specifikit:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231a1a1c' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

.hover\:btn-specifikit:hover {
    border-color: var(--color-primary-600);
    background-color: var(--color-primary-600);
    color: var(--color-white);
}

.hover\:btn-specifikit:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231a1a1c' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}  
  

/*
====================================
Badge Styles (Specifikit Brand)
====================================
*/

/* --- Base Badge (Not used directly, but sets defaults) --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-tagline-3); /* 0.75rem */
  font-weight: var(--font-weight-medium);
  padding: .25rem .625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.4;
}

/* --- Primary Badge --- */
/* For primary status or highlights */
.badge-primary {
  background-color: var(--color-primary-100); /* Indigo 100 */
  color: var(--color-primary-600); /* Indigo 600 */
}
.badge-primary:where(.dark, .dark *) {
  background-color: #3730a3; /* Indigo 800 */
  color: #e0e7ff; /* Indigo 100 */
}

/* For primary status or highlights */
.badge-specifikit {
  background-color: var(--color-primary); /* Indigo 100 */
  color: var(--color-primary-100); /* Indigo 600 */
}
.badge-specifikit:where(.dark, .dark *) {
  background-color: #3730a3; /* Indigo 800 */
  color: #e0e7ff; /* Indigo 100 */
}

/* --- Secondary / Gray Badge --- */
/* For neutral, informational text */
.badge-secondary,
.badge-gray,
.badge-gray-light,
.badge-gray-light-v2 {
  background-color: var(--color-background-3); /* Gray 100 */
  color: #374151; /* Gray 700 */
}
.badge-secondary:where(.dark, .dark *),
.badge-gray:where(.dark, .dark *),
.badge-gray-light:where(.dark, .dark *),
.badge-gray-light-v2:where(.dark, .dark *) {
  background-color: var(--color-background-5); /* Gray 800 */
  color: #d1d5db; /* Gray 300 */
}

/* --- White / Accent Badge --- */
/* For use on dark or colored backgrounds */
.badge-white,
.badge-white-v2 {
  background-color: var(--color-white);
  color: var(--color-secondary); /* Dark Gray text */
  box-shadow: var(--tw-shadow);
}
.badge-white:where(.dark, .dark *),
.badge-white-v2:where(.dark, .dark *) {
  background-color: #374151; /* Gray 700 */
  color: #f3f4f6; /* Gray 100 */
}

/* --- Cyan Badge (Informational) --- */
.badge-cyan,
.badge-cyan-v2 {
  background-color: var(--color-ns-cyan-light);
  color: #0891b2; /* Cyan 600 */
}
.badge-cyan:where(.dark, .dark *),
.badge-cyan-v2:where(.dark, .dark *) {
  background-color: #164e63; /* Cyan 900 */
  color: #a5f3fc; /* Cyan 200 */
}

/* --- Green Badge (Success) --- */
.badge-green,
.badge-green-v2 {
  background-color: var(--color-ns-green-light);
  color: #047857; /* Emerald 700 */
}
.badge-green:where(.dark, .dark *),
.badge-green-v2:where(.dark, .dark *) {
  background-color: #064e3b; /* Emerald 900 */
  color: #a7f3d0; /* Emerald 200 */
}

/* --- Yellow Badge (Warning) --- */
.badge-yellow,
.badge-yellow-v2 {
  background-color: var(--color-ns-yellow-light);
  color: #b45309; /* Amber 700 */
}
.badge-yellow:where(.dark, .dark *),
.badge-yellow-v2:where(.dark, .dark *) {
  background-color: #78350f; /* Amber 900 */
  color: #fcd34d; /* Amber 300 */
}

/* --- Blur Badges (Subtle/Floating) --- */
.badge-blur,
.badge-blur-v2,
.badge-blur-light,
.badge-secondary-light {
  color: var(--color-secondary);
  background-color: rgba(243, 244, 246, 0.7); /* Gray 100 w/ transparency */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.badge-blur:where(.dark, .dark *),
.badge-blur-v2:where(.dark, .dark *),
.badge-blur-light:where(.dark, .dark *),
.badge-secondary-light:where(.dark, .dark *) {
  color: var(--color-accent);
  background-color: rgba(55, 65, 81, 0.5); /* Gray 700 w/ transparency */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Note: The old `.badge-primary-light` is functionally identical to the new `.badge-primary` */
.badge-primary-light {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}
.badge-primary-light:where(.dark, .dark *) {
  background-color: #3730a3;
  color: #e0e7ff;
}

/* =====================================
   Developer "Dark Mode" Section
   ===================================== */
.specifikit-dev-section {
  background-color: var(--color-secondary); /* #111827 - Your dark gray */
  border-color: var(--color-stroke-6); /* #1f2937 - A slightly lighter gray */
}

.specifikit-dev-section .specifikit-dev-heading {
  color: var(--color-accent); /* #ffffff - White */
}

.specifikit-dev-section .specifikit-dev-subheading {
  color: #9ca3af; /* Gray-400 - For muted text on dark bg */
}

.specifikit-dev-section .specifikit-dev-badge {
  color: var(--color-ns-green); /* #10b981 - Bright green for pop */
  background-color: rgba(16, 185, 129, 0.1); /* Green with transparency */
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.specifikit-dev-section .specifikit-dev-list-item svg rect {
  fill: rgba(255, 255, 255, 0.1);
}

.specifikit-dev-section .specifikit-dev-list-item svg path {
  fill: var(--color-ns-green); /* Bright green for checkmarks */
}

.specifikit-dev-section .specifikit-dev-list-item-text {
  color: #d1d5db; /* Gray-300 - Readable text on dark bg */
}

/* Code Block Styling */
.specifikit-code-block {
  background-color: rgba(30, 41, 59, 0.5); /* Slate-800 with transparency */
  border-color: rgba(255, 255, 255, 0.1);
}

.specifikit-code-block-header {
  background-color: rgba(3, 7, 18, 0.3); /* Gray-950 with transparency */
}

.specifikit-code-block-filename {
  color: #94a3b8; /* Slate-400 */
}

.hero-text-gradient {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background-repeat: no-repeat;
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 5s linear infinite textAnimate;
  display: inline-block;
}

.specifikit-hero-text-color {
  background-image: linear-gradient(45deg, var(--color-primary), var(--color-primary-200), var(--color-primary));
}

.specifikit-hero-text-color2 {
  background-image: linear-gradient(45deg, var(--color-primary-400), var(--color-primary-200), var(--color-primary-400));
}

.specifikit-hero-text-color3 {
  /* A subtle, on-brand gradient from light indigo to a slightly darker indigo */
  background-image: linear-gradient(45deg, var(--color-primary-400), var(--color-primary-200), var(--color-primary-400));
  
  /* Standard CSS to make the gradient apply to the text */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Animation properties for a shimmer effect */
  background-size: 200% 200%;
  animation: shimmer 5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@font-face {
  font-family: next-sass;
  src: url("https://www.specifikit.com/assets/fonts/next-sass.eot?obdk3g");
  src: url("https://www.specifikit.com/fonts/next-sass.eot?obdk3g#iefix") format("embedded-opentype"), url("https://www.specifikit.com/fonts/next-sass.ttf?obdk3g") format("truetype"), url("https://www.specifikit.com/fonts/next-sass.woff?obdk3g") format("woff"), url("https://www.specifikit.com/fonts/next-sass.svg?obdk3g#next-sass") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ns-"], [class*=" ns-"] {
  speak: never;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: next-sass !important;
}
/*
.hero-section {
  position: relative;
  background-color: #000;
  background-image: url('https://www.specifikit.com/assets/images/patterns/hero-dot.svg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center bottom;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.85; 
  z-index: -1;
}
*/

.badge {
    display: inline-block;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-weight: 500;
    border-radius: 9999px;
}

.border-r.border-stroke-4 {
    border-color: red;
}

  /* Basic syntax highlighting styles for the code block.
     Uses a color scheme that complements the dark background. */
  .specifikit-code-block .token.property { color: #82aaff; /* Light Blue for Keys */ }
  .specifikit-code-block .token.punctuation,
  .specifikit-code-block .token.operator { color: #89ddff; /* Cyan for Brackets/Colons */ }
  .specifikit-code-block .token.string { color: #c3e88d; /* Green for String Values */ }
  .specifikit-code-block .token.boolean { color: #ff5874; /* Red for Booleans */ }
  .specifikit-code-block .token.number { color: #f78c6c; /* Orange for Numbers */ }