/**
 * Kahunam CSS - Modern Utility Framework
 *
 * Features:
 * - Proportional scaling tied to design breakpoints
 * - Clamp-based fluid typography and spacing
 * - CSS Grid with auto-fit/auto-fill + minmax()
 * - Sensible element defaults with utility overrides
 *
 * Provided by Kahunam
 * Created: 27/12/2025
 *
 * CISN Edition: Customized for Can I Sue Now? legal blog
 * - Fonts: Newsreader (serif headings/articles) + Inter (body/UI)
 * - Colors: Legal/professional palette
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap');

/* ==========================================================================
   Configure your design sizes here
   ========================================================================== */

/* Desktop */
:root {
  --k-size-unit: 16;
  --k-size-container-ideal: 1440;
  --k-size-container-min: 992px;
  --k-size-container-max: 1920px;
  --k-size-container: clamp(var(--k-size-container-min), 100vw, var(--k-size-container-max));
  --k-size-font: calc(var(--k-size-container) / (var(--k-size-container-ideal) / var(--k-size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --k-size-container-ideal: 834;
    --k-size-container-min: 768px;
    --k-size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --k-size-container-ideal: 550;
    --k-size-container-min: 480px;
    --k-size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --k-size-container-ideal: 390;
    --k-size-container-min: 320px;
    --k-size-container-max: 479px;
  }
}


/* ==========================================================================
   DESIGN TOKENS - Can I Sue Now? Edition
   ========================================================================== */

:root {
  /* Fonts - Vox-Style with Newsreader */
  --k-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --k-font-heading: "Newsreader", Georgia, serif;
  --k-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  /* Legacy aliases for existing theme styles */
  --font-heading: var(--k-font-heading);
  --font-body: var(--k-font-body);
  --font-article: "Newsreader", Georgia, serif;

  /* Colors - Legal/Professional Palette */
  --color-primary: #1a1a1a;
  --color-secondary: #e02020;
  --color-accent: #ffcc00;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-bg: #ffffff;
  --color-bg-alt: #f9f9f9;
  --color-bg-dark: #1a1a1a;
  --color-border: #e5e5e5;
  --color-border-dark: #d0d0d0;

  /* Typography Scale - Clamp (fluid) */
  --k-text-display-xl: clamp(3.5rem, 3rem + 4vw, 6rem);
  --k-text-display-lg: clamp(3rem, 2.5rem + 3vw, 5rem);
  --k-text-display:    clamp(2.5rem, 2rem + 2.5vw, 4rem);

  --k-text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --k-text-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  --k-text-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --k-text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --k-text-h5: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --k-text-h6: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);

  --k-text-lg:   clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
  --k-text-base: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  --k-text-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --k-text-xs:   clamp(0.75rem, 0.7rem + 0.1vw, 0.8125rem);
  --k-text-xxs:  clamp(0.625rem, 0.6rem + 0.08vw, 0.75rem);

  --k-text-eyebrow: clamp(0.6875rem, 0.65rem + 0.1vw, 0.8125rem);

  /* Legacy fixed typography scale for existing theme styles */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Spacing Scale (rem) */
  --k-space-0: 0;
  --k-space-1: 0.25rem;
  --k-space-2: 0.5rem;
  --k-space-3: 0.75rem;
  --k-space-4: 1rem;
  --k-space-5: 1.5rem;
  --k-space-6: 2rem;
  --k-space-7: 3rem;
  --k-space-8: 4rem;
  --k-space-9: 6rem;
  --k-space-10: 8rem;

  /* Legacy spacing scale for existing theme styles */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --max-width: 1200px;
  --max-width-content: 680px;
  --max-width-wide: 900px;
  --container-padding: 20px;

  /* Clamp Spacing (fluid) */
  --k-site-padding: clamp(1rem, 5vw, 3rem);

  --k-section-xs: clamp(1.5rem, 4vw, 3rem);
  --k-section-sm: clamp(2rem, 6vw, 4rem);
  --k-section-md: clamp(3rem, 10vw, 6rem);
  --k-section-lg: clamp(4rem, 12vw, 8rem);
  --k-section-xl: clamp(6rem, 15vw, 10rem);

  --k-padding-xs: clamp(0.25rem, 1vw, 0.5rem);
  --k-padding-sm: clamp(0.5rem, 2vw, 1rem);
  --k-padding-md: clamp(1rem, 3vw, 2rem);
  --k-padding-lg: clamp(1.5rem, 4vw, 3rem);
  --k-padding-xl: clamp(2rem, 5vw, 4rem);

  /* Container Widths */
  --k-container-full: var(--k-size-container);
  --k-container-lg: 990px;
  --k-container-md: 790px;
  --k-container-sm: 720px;
  --k-container-xs: 540px;

  /* Gap Scale (rem) */
  --k-gap-1: 0.5rem;
  --k-gap-2: 1rem;
  --k-gap-3: 1.5rem;
  --k-gap-4: 2rem;
  --k-gap-5: 3rem;

  /* Line Heights */
  --k-lh-none: 1;
  --k-lh-tight: 1.15;
  --k-lh-snug: 1.25;
  --k-lh-normal: 1.5;
  --k-lh-relaxed: 1.75;
  --k-lh-loose: 2;

  /* Legacy line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --k-tracking-tighter: -0.05em;
  --k-tracking-tight: -0.025em;
  --k-tracking-normal: 0;
  --k-tracking-wide: 0.025em;
  --k-tracking-wider: 0.05em;
  --k-tracking-widest: 0.1em;
  --k-tracking-caps: 0.15em;

  /* Border */
  --k-border-width: 1px;
  --k-border-radius-sm: 0.125rem;
  --k-border-radius: 0.25rem;
  --k-border-radius-md: 0.5rem;
  --k-border-radius-lg: 1rem;
  --k-border-radius-xl: 1.5rem;

  /* Legacy border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-Index Scale */
  --k-z-0: 0;
  --k-z-10: 10;
  --k-z-20: 20;
  --k-z-30: 30;
  --k-z-40: 40;
  --k-z-50: 50;
  --k-z-max: 9999;
}


/* ==========================================================================
   BASE RESET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-size: var(--k-size-font);
  font-family: var(--k-font-body);
  line-height: var(--k-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

ul, ol {
  padding-left: 1.5em;
}

hr {
  border: none;
  border-top: var(--k-border-width) solid;
  opacity: 0.2;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ==========================================================================
   ELEMENT DEFAULTS
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font-heading);
  font-weight: 600;
  line-height: var(--k-lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--k-text-h1); }
h2 { font-size: var(--k-text-h2); }
h3 { font-size: var(--k-text-h3); }
h4 { font-size: var(--k-text-h4); }
h5 { font-size: var(--k-text-h5); }
h6 { font-size: var(--k-text-h6); }

p {
  font-size: var(--k-text-base);
  text-wrap: pretty;
}

small {
  font-size: var(--k-text-sm);
}

blockquote {
  font-size: var(--k-text-lg);
  font-style: italic;
  padding-left: var(--k-space-5);
  border-left: 3px solid;
}

code, kbd, samp, pre {
  font-family: var(--k-font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: var(--k-space-4);
}


/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

/* Display */
.k-display-xl { font-size: var(--k-text-display-xl); }
.k-display-lg { font-size: var(--k-text-display-lg); }
.k-display    { font-size: var(--k-text-display); }

/* Headings */
.k-h1 { font-size: var(--k-text-h1); }
.k-h2 { font-size: var(--k-text-h2); }
.k-h3 { font-size: var(--k-text-h3); }
.k-h4 { font-size: var(--k-text-h4); }
.k-h5 { font-size: var(--k-text-h5); }
.k-h6 { font-size: var(--k-text-h6); }

/* Body */
.k-text-lg   { font-size: var(--k-text-lg); }
.k-text-base { font-size: var(--k-text-base); }
.k-text-sm   { font-size: var(--k-text-sm); }
.k-text-xs   { font-size: var(--k-text-xs); }
.k-text-xxs  { font-size: var(--k-text-xxs); }

/* Eyebrow / Overline */
.k-eyebrow {
  font-size: var(--k-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-caps);
  font-weight: 600;
  line-height: var(--k-lh-normal);
}

/* Font Weight */
.k-thin       { font-weight: 100; }
.k-extralight { font-weight: 200; }
.k-light      { font-weight: 300; }
.k-regular    { font-weight: 400; }
.k-medium     { font-weight: 500; }
.k-semibold   { font-weight: 600; }
.k-bold       { font-weight: 700; }
.k-extrabold  { font-weight: 800; }
.k-black      { font-weight: 900; }

/* Font Style */
.k-italic     { font-style: italic; }
.k-not-italic { font-style: normal; }

/* Font Family */
.k-font-body    { font-family: var(--k-font-body); }
.k-font-heading { font-family: var(--k-font-heading); }
.k-font-mono    { font-family: var(--k-font-mono); }

/* Text Transform */
.k-uppercase   { text-transform: uppercase; }
.k-lowercase   { text-transform: lowercase; }
.k-capitalize  { text-transform: capitalize; }
.k-normal-case { text-transform: none; }
.k-caps        { text-transform: uppercase; letter-spacing: var(--k-tracking-caps); }

/* Text Alignment */
.k-text-left    { text-align: left; }
.k-text-center  { text-align: center; }
.k-text-right   { text-align: right; }
.k-text-justify { text-align: justify; }

/* Text Decoration */
.k-underline    { text-decoration: underline; }
.k-line-through { text-decoration: line-through; }
.k-no-underline { text-decoration: none; }

/* White Space */
.k-whitespace-normal { white-space: normal; }
.k-whitespace-nowrap { white-space: nowrap; }
.k-whitespace-pre    { white-space: pre; }
.k-break-words       { overflow-wrap: break-word; }

/* Text Wrap */
.k-text-balance { text-wrap: balance; }
.k-text-pretty  { text-wrap: pretty; }

/* Line Height */
.k-leading-none    { line-height: var(--k-lh-none); }
.k-leading-tight   { line-height: var(--k-lh-tight); }
.k-leading-snug    { line-height: var(--k-lh-snug); }
.k-leading-normal  { line-height: var(--k-lh-normal); }
.k-leading-relaxed { line-height: var(--k-lh-relaxed); }
.k-leading-loose   { line-height: var(--k-lh-loose); }

/* Letter Spacing */
.k-tracking-tighter { letter-spacing: var(--k-tracking-tighter); }
.k-tracking-tight   { letter-spacing: var(--k-tracking-tight); }
.k-tracking-normal  { letter-spacing: var(--k-tracking-normal); }
.k-tracking-wide    { letter-spacing: var(--k-tracking-wide); }
.k-tracking-wider   { letter-spacing: var(--k-tracking-wider); }
.k-tracking-widest  { letter-spacing: var(--k-tracking-widest); }

/* Truncation */
.k-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.k-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.k-container {
  width: 100%;
  max-width: var(--k-container-full);
  margin-inline: auto;
  padding-inline: var(--k-site-padding);
}

.k-container-lg { max-width: var(--k-container-lg); }
.k-container-md { max-width: var(--k-container-md); }
.k-container-sm { max-width: var(--k-container-sm); }
.k-container-xs { max-width: var(--k-container-xs); }
.k-container-fluid { max-width: 100%; }

/* Legacy container utilities */
.k-container-narrow {
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.k-container-wide {
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}


/* ==========================================================================
   SECTIONS (Clamp-based vertical spacing)
   ========================================================================== */

.k-section-xs { padding-block: var(--k-section-xs); }
.k-section-sm { padding-block: var(--k-section-sm); }
.k-section-md { padding-block: var(--k-section-md); }
.k-section-lg { padding-block: var(--k-section-lg); }
.k-section-xl { padding-block: var(--k-section-xl); }

.k-section-t-xs { padding-top: var(--k-section-xs); }
.k-section-t-sm { padding-top: var(--k-section-sm); }
.k-section-t-md { padding-top: var(--k-section-md); }
.k-section-t-lg { padding-top: var(--k-section-lg); }
.k-section-t-xl { padding-top: var(--k-section-xl); }

.k-section-b-xs { padding-bottom: var(--k-section-xs); }
.k-section-b-sm { padding-bottom: var(--k-section-sm); }
.k-section-b-md { padding-bottom: var(--k-section-md); }
.k-section-b-lg { padding-bottom: var(--k-section-lg); }
.k-section-b-xl { padding-bottom: var(--k-section-xl); }


/* ==========================================================================
   DISPLAY
   ========================================================================== */

.k-block        { display: block; }
.k-inline       { display: inline; }
.k-inline-block { display: inline-block; }
.k-hidden       { display: none; }
.k-contents     { display: contents; }


/* ==========================================================================
   FLEXBOX
   ========================================================================== */

.k-flex        { display: flex; }
.k-inline-flex { display: inline-flex; }

.k-flex-row         { flex-direction: row; }
.k-flex-row-reverse { flex-direction: row-reverse; }
.k-flex-col         { flex-direction: column; }
.k-flex-col-reverse { flex-direction: column-reverse; }

.k-flex-wrap   { flex-wrap: wrap; }
.k-flex-nowrap { flex-wrap: nowrap; }

.k-items-start    { align-items: flex-start; }
.k-items-end      { align-items: flex-end; }
.k-items-center   { align-items: center; }
.k-items-baseline { align-items: baseline; }
.k-items-stretch  { align-items: stretch; }

.k-self-start   { align-self: flex-start; }
.k-self-end     { align-self: flex-end; }
.k-self-center  { align-self: center; }
.k-self-stretch { align-self: stretch; }

.k-justify-start   { justify-content: flex-start; }
.k-justify-end     { justify-content: flex-end; }
.k-justify-center  { justify-content: center; }
.k-justify-between { justify-content: space-between; }
.k-justify-around  { justify-content: space-around; }
.k-justify-evenly  { justify-content: space-evenly; }

.k-content-start   { align-content: flex-start; }
.k-content-end     { align-content: flex-end; }
.k-content-center  { align-content: center; }
.k-content-between { align-content: space-between; }
.k-content-around  { align-content: space-around; }
.k-content-stretch { align-content: stretch; }

.k-flex-1    { flex: 1 1 0%; }
.k-flex-auto { flex: 1 1 auto; }
.k-flex-none { flex: none; }

.k-grow     { flex-grow: 1; }
.k-grow-0   { flex-grow: 0; }
.k-shrink   { flex-shrink: 1; }
.k-shrink-0 { flex-shrink: 0; }

.k-order-first { order: -9999; }
.k-order-last  { order: 9999; }
.k-order-none  { order: 0; }


/* ==========================================================================
   CSS GRID
   ========================================================================== */

.k-grid        { display: grid; }
.k-inline-grid { display: inline-grid; }

/* Auto Grid - pass in --grid-min, --grid-max, --grid-gap as needed */
.k-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 15rem)), var(--grid-max, 1fr)));
  gap: var(--grid-gap, 1rem);
}

.k-grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 15rem)), var(--grid-max, 1fr)));
  gap: var(--grid-gap, 1rem);
}

/* Fixed Column Grids */
.k-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.k-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.k-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.k-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }

/* Grid Flow */
.k-grid-flow-row   { grid-auto-flow: row; }
.k-grid-flow-col   { grid-auto-flow: column; }
.k-grid-flow-dense { grid-auto-flow: dense; }

/* Column Span */
.k-col-span-1    { grid-column: span 1 / span 1; }
.k-col-span-2    { grid-column: span 2 / span 2; }
.k-col-span-3    { grid-column: span 3 / span 3; }
.k-col-span-4    { grid-column: span 4 / span 4; }
.k-col-span-5    { grid-column: span 5 / span 5; }
.k-col-span-6    { grid-column: span 6 / span 6; }
.k-col-span-full { grid-column: 1 / -1; }

/* Row Span */
.k-row-span-1    { grid-row: span 1 / span 1; }
.k-row-span-2    { grid-row: span 2 / span 2; }
.k-row-span-3    { grid-row: span 3 / span 3; }
.k-row-span-full { grid-row: 1 / -1; }

/* Place Items */
.k-place-items-start   { place-items: start; }
.k-place-items-end     { place-items: end; }
.k-place-items-center  { place-items: center; }
.k-place-items-stretch { place-items: stretch; }

/* Place Content */
.k-place-content-start   { place-content: start; }
.k-place-content-end     { place-content: end; }
.k-place-content-center  { place-content: center; }
.k-place-content-between { place-content: space-between; }
.k-place-content-stretch { place-content: stretch; }


/* ==========================================================================
   GAP
   ========================================================================== */

.k-gap-0 { gap: 0; }
.k-gap-1 { gap: var(--k-gap-1); }
.k-gap-2 { gap: var(--k-gap-2); }
.k-gap-3 { gap: var(--k-gap-3); }
.k-gap-4 { gap: var(--k-gap-4); }
.k-gap-5 { gap: var(--k-gap-5); }

.k-gap-x-0 { column-gap: 0; }
.k-gap-x-1 { column-gap: var(--k-gap-1); }
.k-gap-x-2 { column-gap: var(--k-gap-2); }
.k-gap-x-3 { column-gap: var(--k-gap-3); }
.k-gap-x-4 { column-gap: var(--k-gap-4); }
.k-gap-x-5 { column-gap: var(--k-gap-5); }

.k-gap-y-0 { row-gap: 0; }
.k-gap-y-1 { row-gap: var(--k-gap-1); }
.k-gap-y-2 { row-gap: var(--k-gap-2); }
.k-gap-y-3 { row-gap: var(--k-gap-3); }
.k-gap-y-4 { row-gap: var(--k-gap-4); }
.k-gap-y-5 { row-gap: var(--k-gap-5); }

/* Legacy gap utilities */
.k-gap-xs { gap: var(--space-xs); }
.k-gap-sm { gap: var(--space-sm); }
.k-gap-md { gap: var(--space-md); }
.k-gap-lg { gap: var(--space-lg); }
.k-gap-xl { gap: var(--space-xl); }
.k-gap-2xl { gap: var(--space-2xl); }


/* ==========================================================================
   MARGINS
   ========================================================================== */

.k-m-0  { margin: var(--k-space-0); }
.k-m-1  { margin: var(--k-space-1); }
.k-m-2  { margin: var(--k-space-2); }
.k-m-3  { margin: var(--k-space-3); }
.k-m-4  { margin: var(--k-space-4); }
.k-m-5  { margin: var(--k-space-5); }
.k-m-6  { margin: var(--k-space-6); }
.k-m-7  { margin: var(--k-space-7); }
.k-m-8  { margin: var(--k-space-8); }
.k-m-9  { margin: var(--k-space-9); }
.k-m-10 { margin: var(--k-space-10); }
.k-m-auto { margin: auto; }

.k-mt-0  { margin-top: var(--k-space-0); }
.k-mt-1  { margin-top: var(--k-space-1); }
.k-mt-2  { margin-top: var(--k-space-2); }
.k-mt-3  { margin-top: var(--k-space-3); }
.k-mt-4  { margin-top: var(--k-space-4); }
.k-mt-5  { margin-top: var(--k-space-5); }
.k-mt-6  { margin-top: var(--k-space-6); }
.k-mt-7  { margin-top: var(--k-space-7); }
.k-mt-8  { margin-top: var(--k-space-8); }
.k-mt-9  { margin-top: var(--k-space-9); }
.k-mt-10 { margin-top: var(--k-space-10); }
.k-mt-auto { margin-top: auto; }

.k-mr-0  { margin-right: var(--k-space-0); }
.k-mr-1  { margin-right: var(--k-space-1); }
.k-mr-2  { margin-right: var(--k-space-2); }
.k-mr-3  { margin-right: var(--k-space-3); }
.k-mr-4  { margin-right: var(--k-space-4); }
.k-mr-5  { margin-right: var(--k-space-5); }
.k-mr-6  { margin-right: var(--k-space-6); }
.k-mr-7  { margin-right: var(--k-space-7); }
.k-mr-8  { margin-right: var(--k-space-8); }
.k-mr-auto { margin-right: auto; }

.k-mb-0  { margin-bottom: var(--k-space-0); }
.k-mb-1  { margin-bottom: var(--k-space-1); }
.k-mb-2  { margin-bottom: var(--k-space-2); }
.k-mb-3  { margin-bottom: var(--k-space-3); }
.k-mb-4  { margin-bottom: var(--k-space-4); }
.k-mb-5  { margin-bottom: var(--k-space-5); }
.k-mb-6  { margin-bottom: var(--k-space-6); }
.k-mb-7  { margin-bottom: var(--k-space-7); }
.k-mb-8  { margin-bottom: var(--k-space-8); }
.k-mb-9  { margin-bottom: var(--k-space-9); }
.k-mb-10 { margin-bottom: var(--k-space-10); }
.k-mb-auto { margin-bottom: auto; }

.k-ml-0  { margin-left: var(--k-space-0); }
.k-ml-1  { margin-left: var(--k-space-1); }
.k-ml-2  { margin-left: var(--k-space-2); }
.k-ml-3  { margin-left: var(--k-space-3); }
.k-ml-4  { margin-left: var(--k-space-4); }
.k-ml-5  { margin-left: var(--k-space-5); }
.k-ml-6  { margin-left: var(--k-space-6); }
.k-ml-7  { margin-left: var(--k-space-7); }
.k-ml-8  { margin-left: var(--k-space-8); }
.k-ml-auto { margin-left: auto; }

.k-mx-0  { margin-inline: var(--k-space-0); }
.k-mx-1  { margin-inline: var(--k-space-1); }
.k-mx-2  { margin-inline: var(--k-space-2); }
.k-mx-3  { margin-inline: var(--k-space-3); }
.k-mx-4  { margin-inline: var(--k-space-4); }
.k-mx-5  { margin-inline: var(--k-space-5); }
.k-mx-6  { margin-inline: var(--k-space-6); }
.k-mx-7  { margin-inline: var(--k-space-7); }
.k-mx-8  { margin-inline: var(--k-space-8); }
.k-mx-auto { margin-inline: auto; }

.k-my-0  { margin-block: var(--k-space-0); }
.k-my-1  { margin-block: var(--k-space-1); }
.k-my-2  { margin-block: var(--k-space-2); }
.k-my-3  { margin-block: var(--k-space-3); }
.k-my-4  { margin-block: var(--k-space-4); }
.k-my-5  { margin-block: var(--k-space-5); }
.k-my-6  { margin-block: var(--k-space-6); }
.k-my-7  { margin-block: var(--k-space-7); }
.k-my-8  { margin-block: var(--k-space-8); }
.k-my-9  { margin-block: var(--k-space-9); }
.k-my-10 { margin-block: var(--k-space-10); }
.k-my-auto { margin-block: auto; }

/* Legacy margin utilities */
.k-mt-xs { margin-top: var(--space-xs); }
.k-mt-2xl { margin-top: var(--space-2xl); }
.k-mt-3xl { margin-top: var(--space-3xl); }
.k-mb-xs { margin-bottom: var(--space-xs); }
.k-mb-2xl { margin-bottom: var(--space-2xl); }
.k-mb-3xl { margin-bottom: var(--space-3xl); }


/* ==========================================================================
   PADDING
   ========================================================================== */

.k-p-0  { padding: var(--k-space-0); }
.k-p-1  { padding: var(--k-space-1); }
.k-p-2  { padding: var(--k-space-2); }
.k-p-3  { padding: var(--k-space-3); }
.k-p-4  { padding: var(--k-space-4); }
.k-p-5  { padding: var(--k-space-5); }
.k-p-6  { padding: var(--k-space-6); }
.k-p-7  { padding: var(--k-space-7); }
.k-p-8  { padding: var(--k-space-8); }
.k-p-9  { padding: var(--k-space-9); }
.k-p-10 { padding: var(--k-space-10); }

.k-pt-0  { padding-top: var(--k-space-0); }
.k-pt-1  { padding-top: var(--k-space-1); }
.k-pt-2  { padding-top: var(--k-space-2); }
.k-pt-3  { padding-top: var(--k-space-3); }
.k-pt-4  { padding-top: var(--k-space-4); }
.k-pt-5  { padding-top: var(--k-space-5); }
.k-pt-6  { padding-top: var(--k-space-6); }
.k-pt-7  { padding-top: var(--k-space-7); }
.k-pt-8  { padding-top: var(--k-space-8); }
.k-pt-9  { padding-top: var(--k-space-9); }
.k-pt-10 { padding-top: var(--k-space-10); }

.k-pr-0  { padding-right: var(--k-space-0); }
.k-pr-1  { padding-right: var(--k-space-1); }
.k-pr-2  { padding-right: var(--k-space-2); }
.k-pr-3  { padding-right: var(--k-space-3); }
.k-pr-4  { padding-right: var(--k-space-4); }
.k-pr-5  { padding-right: var(--k-space-5); }
.k-pr-6  { padding-right: var(--k-space-6); }
.k-pr-7  { padding-right: var(--k-space-7); }
.k-pr-8  { padding-right: var(--k-space-8); }

.k-pb-0  { padding-bottom: var(--k-space-0); }
.k-pb-1  { padding-bottom: var(--k-space-1); }
.k-pb-2  { padding-bottom: var(--k-space-2); }
.k-pb-3  { padding-bottom: var(--k-space-3); }
.k-pb-4  { padding-bottom: var(--k-space-4); }
.k-pb-5  { padding-bottom: var(--k-space-5); }
.k-pb-6  { padding-bottom: var(--k-space-6); }
.k-pb-7  { padding-bottom: var(--k-space-7); }
.k-pb-8  { padding-bottom: var(--k-space-8); }
.k-pb-9  { padding-bottom: var(--k-space-9); }
.k-pb-10 { padding-bottom: var(--k-space-10); }

.k-pl-0  { padding-left: var(--k-space-0); }
.k-pl-1  { padding-left: var(--k-space-1); }
.k-pl-2  { padding-left: var(--k-space-2); }
.k-pl-3  { padding-left: var(--k-space-3); }
.k-pl-4  { padding-left: var(--k-space-4); }
.k-pl-5  { padding-left: var(--k-space-5); }
.k-pl-6  { padding-left: var(--k-space-6); }
.k-pl-7  { padding-left: var(--k-space-7); }
.k-pl-8  { padding-left: var(--k-space-8); }

.k-px-0  { padding-inline: var(--k-space-0); }
.k-px-1  { padding-inline: var(--k-space-1); }
.k-px-2  { padding-inline: var(--k-space-2); }
.k-px-3  { padding-inline: var(--k-space-3); }
.k-px-4  { padding-inline: var(--k-space-4); }
.k-px-5  { padding-inline: var(--k-space-5); }
.k-px-6  { padding-inline: var(--k-space-6); }
.k-px-7  { padding-inline: var(--k-space-7); }
.k-px-8  { padding-inline: var(--k-space-8); }
.k-px-9  { padding-inline: var(--k-space-9); }
.k-px-10 { padding-inline: var(--k-space-10); }

.k-py-0  { padding-block: var(--k-space-0); }
.k-py-1  { padding-block: var(--k-space-1); }
.k-py-2  { padding-block: var(--k-space-2); }
.k-py-3  { padding-block: var(--k-space-3); }
.k-py-4  { padding-block: var(--k-space-4); }
.k-py-5  { padding-block: var(--k-space-5); }
.k-py-6  { padding-block: var(--k-space-6); }
.k-py-7  { padding-block: var(--k-space-7); }
.k-py-8  { padding-block: var(--k-space-8); }
.k-py-9  { padding-block: var(--k-space-9); }
.k-py-10 { padding-block: var(--k-space-10); }

/* Legacy padding utilities */
.k-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.k-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.k-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.k-py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.k-py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.k-py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.k-py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.k-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.k-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.k-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.k-px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.k-p-xs { padding: var(--space-xs); }
.k-p-2xl { padding: var(--space-2xl); }


/* ==========================================================================
   WIDTH & HEIGHT
   ========================================================================== */

.k-w-auto   { width: auto; }
.k-w-full   { width: 100%; }
.k-w-screen { width: 100vw; }
.k-w-min    { width: min-content; }
.k-w-max    { width: max-content; }
.k-w-fit    { width: fit-content; }

.k-w-1-2 { width: 50%; }
.k-w-1-3 { width: 33.333333%; }
.k-w-2-3 { width: 66.666667%; }
.k-w-1-4 { width: 25%; }
.k-w-3-4 { width: 75%; }

.k-max-w-none { max-width: none; }
.k-max-w-full { max-width: 100%; }
.k-max-w-container { max-width: var(--k-container-full); }

.k-min-w-0    { min-width: 0; }
.k-min-w-full { min-width: 100%; }

.k-h-auto   { height: auto; }
.k-h-full   { height: 100%; }
.k-h-screen { height: 100vh; height: 100dvh; }
.k-h-min    { height: min-content; }
.k-h-max    { height: max-content; }
.k-h-fit    { height: fit-content; }

.k-min-h-0      { min-height: 0; }
.k-min-h-full   { min-height: 100%; }
.k-min-h-screen { min-height: 100vh; min-height: 100dvh; }

.k-max-h-full   { max-height: 100%; }
.k-max-h-screen { max-height: 100vh; max-height: 100dvh; }

/* Aspect Ratio */
.k-aspect-auto   { aspect-ratio: auto; }
.k-aspect-square { aspect-ratio: 1 / 1; }
.k-aspect-video  { aspect-ratio: 16 / 9; }
.k-aspect-4-3    { aspect-ratio: 4 / 3; }


/* ==========================================================================
   POSITION
   ========================================================================== */

.k-static   { position: static; }
.k-relative { position: relative; }
.k-absolute { position: absolute; }
.k-fixed    { position: fixed; }
.k-sticky   { position: sticky; }

.k-inset-0   { inset: 0; }
.k-inset-x-0 { left: 0; right: 0; }
.k-inset-y-0 { top: 0; bottom: 0; }

.k-top-0    { top: 0; }
.k-right-0  { right: 0; }
.k-bottom-0 { bottom: 0; }
.k-left-0   { left: 0; }

.k-top-auto    { top: auto; }
.k-right-auto  { right: auto; }
.k-bottom-auto { bottom: auto; }
.k-left-auto   { left: auto; }

/* Z-Index */
.k-z-auto { z-index: auto; }
.k-z-0    { z-index: var(--k-z-0); }
.k-z-10   { z-index: var(--k-z-10); }
.k-z-20   { z-index: var(--k-z-20); }
.k-z-30   { z-index: var(--k-z-30); }
.k-z-40   { z-index: var(--k-z-40); }
.k-z-50   { z-index: var(--k-z-50); }
.k-z-max  { z-index: var(--k-z-max); }
.k-z-100  { z-index: 100; }


/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.k-overflow-auto    { overflow: auto; }
.k-overflow-hidden  { overflow: hidden; }
.k-overflow-visible { overflow: visible; }
.k-overflow-scroll  { overflow: scroll; }
.k-overflow-clip    { overflow: clip; }

.k-overflow-x-auto   { overflow-x: auto; }
.k-overflow-x-hidden { overflow-x: hidden; }
.k-overflow-y-auto   { overflow-y: auto; }
.k-overflow-y-hidden { overflow-y: hidden; }

.k-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.k-scrollbar-hide::-webkit-scrollbar { display: none; }


/* ==========================================================================
   BORDERS
   ========================================================================== */

.k-border   { border: var(--k-border-width) solid; }
.k-border-0 { border: 0; }
.k-border-2 { border-width: 2px; }
.k-border-4 { border-width: 4px; }

.k-border-t { border-top: var(--k-border-width) solid; }
.k-border-r { border-right: var(--k-border-width) solid; }
.k-border-b { border-bottom: var(--k-border-width) solid; }
.k-border-l { border-left: var(--k-border-width) solid; }

.k-border-t-0 { border-top-width: 0; }
.k-border-r-0 { border-right-width: 0; }
.k-border-b-0 { border-bottom-width: 0; }
.k-border-l-0 { border-left-width: 0; }

/* Border Radius */
.k-rounded-none { border-radius: 0; }
.k-rounded-sm   { border-radius: var(--k-border-radius-sm); }
.k-rounded      { border-radius: var(--k-border-radius); }
.k-rounded-md   { border-radius: var(--k-border-radius-md); }
.k-rounded-lg   { border-radius: var(--k-border-radius-lg); }
.k-rounded-xl   { border-radius: var(--k-border-radius-xl); }
.k-rounded-full { border-radius: 9999px; }

.k-rounded-t { border-radius: var(--k-border-radius) var(--k-border-radius) 0 0; }
.k-rounded-r { border-radius: 0 var(--k-border-radius) var(--k-border-radius) 0; }
.k-rounded-b { border-radius: 0 0 var(--k-border-radius) var(--k-border-radius); }
.k-rounded-l { border-radius: var(--k-border-radius) 0 0 var(--k-border-radius); }

/* Legacy border utilities */
.k-border-dark { border-color: var(--color-border-dark); }


/* ==========================================================================
   LISTS
   ========================================================================== */

.k-list-none    { list-style-type: none; }
.k-list-disc    { list-style-type: disc; }
.k-list-decimal { list-style-type: decimal; }

.k-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   VISIBILITY & ACCESSIBILITY
   ========================================================================== */

.k-visible   { visibility: visible; }
.k-invisible { visibility: hidden; }

.k-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
   OBJECT FIT
   ========================================================================== */

.k-object-contain { object-fit: contain; }
.k-object-cover   { object-fit: cover; }
.k-object-fill    { object-fit: fill; }
.k-object-none    { object-fit: none; }

.k-object-center { object-position: center; }
.k-object-top    { object-position: top; }
.k-object-bottom { object-position: bottom; }


/* ==========================================================================
   INTERACTION
   ========================================================================== */

.k-pointer { cursor: pointer; }

.k-pointer-events-none { pointer-events: none; }
.k-pointer-events-auto { pointer-events: auto; }

.k-select-none { user-select: none; }
.k-select-text { user-select: text; }


/* ==========================================================================
   OPACITY
   ========================================================================== */

.k-opacity-0   { opacity: 0; }
.k-opacity-25  { opacity: 0.25; }
.k-opacity-50  { opacity: 0.5; }
.k-opacity-75  { opacity: 0.75; }
.k-opacity-100 { opacity: 1; }


/* ==========================================================================
   SHADOWS
   ========================================================================== */

.k-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06); }
.k-shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); }
.k-shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); }
.k-shadow-none { box-shadow: none; }


/* ==========================================================================
   TRANSITIONS
   ========================================================================== */

.k-transition { transition: all var(--transition-base); }
.k-transition-fast { transition: all var(--transition-fast); }
.k-transition-slow { transition: all var(--transition-slow); }


/* ==========================================================================
   COLOR UTILITIES (Legacy support for existing theme)
   ========================================================================== */

/* Text Colors */
.k-text-primary { color: var(--color-primary); }
.k-text-secondary { color: var(--color-text-secondary); }
.k-text-muted { color: var(--color-text-muted); }
.k-text-accent { color: var(--color-secondary); }
.k-text-white { color: #ffffff; }

/* Background Colors */
.k-bg-white { background-color: var(--color-bg); }
.k-bg-alt { background-color: var(--color-bg-alt); }
.k-bg-dark { background-color: var(--color-bg-dark); }
.k-bg-primary { background-color: var(--color-primary); }
.k-bg-accent { background-color: var(--color-secondary); }


/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --text-5xl: 36px;
    --text-4xl: 30px;
    --text-3xl: 26px;
    --text-2xl: 22px;
  }

  .k-hide-mobile { display: none !important; }
  .k-show-mobile { display: block !important; }

  .k-grid-cols-2,
  .k-grid-cols-3,
  .k-grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .k-mobile-stack {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  .k-hide-desktop { display: none !important; }
  .k-show-desktop { display: block !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .k-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}