/**
 * Utility primitives
 * Single-purpose utility classes for spacing, colors, layout, etc.
 */
@layer ks-primitives {
  /* Transform utilities (for slide animations) */
  .ks-translate-x-full { transform: translateX(100%); }
  .ks-translate-y-full { transform: translateY(100%); }
  .ks-translate-x-0 { transform: translateX(0); }
  .ks-translate-y-0 { transform: translateY(0); }

  /* Text shadow utilities (migrated from Tailwind drop-shadow-*) */
  .ks-text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  .ks-text-shadow-md { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
  .ks-text-shadow-lg { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3); }
  .ks-text-shadow-xl { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4); }

  /* Backdrop blur utilities (migrated from Tailwind backdrop-blur-*) */
  .ks-backdrop-blur-sm { backdrop-filter: blur(4px); }
  .ks-backdrop-blur-md { backdrop-filter: blur(12px); }
  .ks-backdrop-blur-lg { backdrop-filter: blur(16px); }

  /* Overflow */
  .ks-overflow-hidden { overflow: hidden; }

  /* Background colors */
  .ks-bg-black { background-color: var(--ks-color-black); }
  .ks-bg-transparent { background-color: transparent; }

  /* Gradient accent line (section header decoration) */
  .ks-accent-line {
    block-size: 0.25rem;
    inline-size: 5rem;
    background: linear-gradient(to right, var(--ks-color-primary-600), var(--ks-color-secondary-600));
    border-radius: var(--ks-radius-full);
  }

  /* Level gradients (course levels) */
  .ks-gradient-foundation {
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
  }
  :where(.dark) .ks-gradient-foundation {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  }
  .ks-gradient-foundation-accent {
    background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
  }
  :where(.dark) .ks-gradient-foundation-accent {
    background: linear-gradient(135deg, #16a34a 0%, #047857 100%);
  }
  .ks-gradient-intermediate {
    background: linear-gradient(135deg, #eff6ff 0%, #cffafe 100%);
  }
  :where(.dark) .ks-gradient-intermediate {
    background: linear-gradient(135deg, #1e3a5f 0%, #164e63 100%);
  }
  .ks-gradient-intermediate-accent {
    background: linear-gradient(135deg, #3b82f6 0%, #0891b2 100%);
  }
  :where(.dark) .ks-gradient-intermediate-accent {
    background: linear-gradient(135deg, #2563eb 0%, #0e7490 100%);
  }
  .ks-gradient-advanced {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  }
  :where(.dark) .ks-gradient-advanced {
    background: linear-gradient(135deg, #3b0764 0%, #4c1d95 100%);
  }
  .ks-gradient-advanced-accent {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  }
  :where(.dark) .ks-gradient-advanced-accent {
    background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%);
  }

  /* Form elements */
  .ks-otp-input {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.5em;
    text-align: center;
    max-width: 12rem;
    margin: 0 auto;
    display: block;
  }

  .ks-select-sm {
    width: 5rem;
    padding: var(--ks-space-1) var(--ks-space-2);
  }

  .ks-w-full { width: 100%; }

  /* Text colors */
  .ks-text-primary { color: var(--ks-color-primary-600); }
  .ks-text-warning { color: var(--ks-color-warning-500); }
  .ks-text-secondary { color: var(--ks-color-secondary-600); }
  .ks-text-white { color: var(--ks-color-white); }
  .ks-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Button variants */
  .ks-button-link {
    background: none;
    border: none;
    color: var(--ks-color-primary-600);
    cursor: pointer;
    padding: var(--ks-space-1) var(--ks-space-2);
  }
  .ks-button-link:hover {
    color: var(--ks-color-primary-500);
    text-decoration: underline;
  }

  .ks-button-danger {
    color: var(--ks-color-danger-600);
    padding: var(--ks-space-2) var(--ks-space-4);
  }
  .ks-button-danger:hover {
    color: var(--ks-color-danger-800);
  }

  /* Dividers */
  .ks-divider-text {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .ks-divider-text::before,
  .ks-divider-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--ks-color-gray-300);
  }
  .ks-divider-text span {
    padding: 0 var(--ks-space-2);
  }

  /* Icon circles */
  .ks-icon-circle-primary {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--ks-color-primary-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ks-icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Size variant for large icon circles (matches success/warning circles). */
  .ks-icon-circle-lg {
    width: 5rem;
    height: 5rem;
  }

  .ks-icon-circle-success {
    width: 5rem;
    height: 5rem;
    background-color: var(--ks-color-secondary-100);
    color: var(--ks-color-secondary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ks-icon-circle-warning {
    width: 5rem;
    height: 5rem;
    background-color: var(--ks-color-warning-100);
    color: var(--ks-color-warning-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ks-icon-circle-info {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--ks-color-primary-100);
    color: var(--ks-color-primary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ks-icon-circle-sm {
    width: 2rem;
    height: 2rem;
  }

  /* Display */
  .ks-inline-block { display: inline-block; }
  .ks-block { display: block; }

  /* Position */
  .ks-relative { position: relative; }
  .ks-sticky {
    position: sticky;
    top: 0;
    left: 0;
  }
  .ks-z-0 { z-index: 0; }
  .ks-z-50 { z-index: 50; }

  /* Sizing */
  .ks-h-full { height: 100%; }
  .ks-w-full { width: 100%; }
  .ks-min-h-screen { min-height: 100vh; }
  .ks-min-h-full { min-height: 100vh; }
  .ks-min-h-50vh { min-height: 50vh; }
  .ks-max-w-sm { max-width: 24rem; }
  .ks-max-w-md { max-width: 32rem; }
  .ks-max-w-lg { max-width: 48rem; }
  .ks-max-w-xl { max-width: 64rem; }

  /* Background variants */
  .ks-bg-secondary-dark { background-color: var(--ks-color-secondary-800); }
  .ks-bg-gradient-primary {
    background: linear-gradient(135deg, var(--ks-color-primary-600), var(--ks-color-secondary-600));
  }
  .ks-bg-gradient-dark {
    background: linear-gradient(135deg, var(--ks-color-gray-800), var(--ks-color-gray-900));
  }
  .ks-bg-gradient-subtle {
    background: linear-gradient(180deg, var(--ks-color-gray-50), var(--ks-color-white));
  }
  :where(.dark) .ks-bg-gradient-subtle {
    background: linear-gradient(180deg, var(--ks-color-gray-800), var(--ks-color-gray-900));
  }
  .ks-bg-primary { background-color: var(--ks-color-primary-600); }
  .ks-bg-primary-subtle { background-color: var(--ks-color-primary-100); }
  .ks-bg-muted { background-color: var(--ks-color-gray-50); }
  :where(.dark) .ks-bg-muted { background-color: var(--ks-color-gray-800); }
  .ks-bg-surface { background-color: var(--ks-color-white); }
  :where(.dark) .ks-bg-surface { background-color: var(--ks-color-gray-900); }
  .ks-bg-success { background-color: var(--ks-color-success, #22c55e); }
  .ks-bg-danger { background-color: var(--ks-color-danger, #ef4444); }

  /* Flex */
  .ks-flex-shrink-0 { flex-shrink: 0; }
  .ks-flex-1 { flex: 1; }

  /* Icon sizes */
  .ks-icon-xs { width: 0.75rem; height: 0.75rem; }   /* 12px */
  .ks-icon-2xs { width: 0.875rem; height: 0.875rem; } /* 14px */
  .ks-icon-sm { width: 1rem; height: 1rem; }         /* 16px */
  .ks-icon-md { width: 1.25rem; height: 1.25rem; }   /* 20px */
  .ks-icon-lg { width: 1.5rem; height: 1.5rem; }     /* 24px */
  .ks-icon-xl { width: 2rem; height: 2rem; }         /* 32px */
  .ks-icon-2xl { width: 3rem; height: 3rem; }        /* 48px */
  .ks-icon-3xl { width: 4rem; height: 4rem; }        /* 64px */

  /* Opacity */
  .ks-opacity-80 { opacity: 0.8; }

  /* Legend dot */
  .ks-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--ks-radius-full, 9999px);
    flex-shrink: 0;
  }

  /* Border accents */
  .ks-border-l-primary { border-left: 4px solid var(--ks-color-primary, #0d9488); }
  .ks-border-l-warning { border-left: 4px solid var(--ks-color-warning, #f59e0b); }
  .ks-border-l-success { border-left: 4px solid var(--ks-color-success, #22c55e); }
  .ks-border-l-danger { border-left: 4px solid var(--ks-color-danger, #ef4444); }

  /* Section padding */
  .ks-section-md { padding-block: var(--ks-space-xl, 3rem); }
  .ks-section-lg { padding-block: var(--ks-space-2xl, 4rem); }

  /* Margin */
  .ks-my-xl { margin-block: var(--ks-space-xl, 3rem); }
  .ks-mx-auto { margin-inline: auto; }
  .ks-mr-xs { margin-right: var(--ks-space-1); }
  .ks-mr-sm { margin-right: var(--ks-space-2); }

  /* Padding */
  .ks-py-md { padding-block: var(--ks-space-4); }

  /* Scroll margin */
  .ks-scroll-mt-sm { scroll-margin-top: var(--ks-space-sm, 0.5rem); }

  /* Cart badge */
  .ks-cart-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--ks-color-primary-600);
    color: var(--ks-color-white);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .ks-hidden lives in the objects layer; restate here so it wins over display:flex */
  .ks-cart-badge.ks-hidden {
    display: none;
  }

  /* Button ghost (for icon buttons) */
  .ks-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-xs, 0.5rem);
    background-color: transparent;
    border-radius: var(--ks-radius-md, 0.5rem);
    color: var(--ks-color-text, #374151);
    transition: background-color 0.2s, color 0.2s;
  }
  .ks-button-ghost:hover {
    background-color: var(--ks-color-gray-100, #f3f4f6);
  }
  :where(.dark) .ks-button-ghost {
    color: var(--ks-color-gray-300, #d1d5db);
  }
  :where(.dark) .ks-button-ghost:hover {
    background-color: var(--ks-color-gray-800, #1f2937);
  }

  /* Neutral square social icon tile */
  .ks-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ks-space-10);
    block-size: var(--ks-space-10);
    border-radius: var(--ks-radius-sm);
    background-color: var(--ks-color-gray-200);
    color: var(--ks-color-text-muted);
    transition: all var(--ks-duration-base) var(--ks-ease-standard);
  }
  .ks-social-icon:hover {
    background-color: var(--ks-color-gray-300);
    color: var(--ks-color-text-strong);
  }
  :where(.dark) .ks-social-icon {
    background-color: var(--ks-color-gray-800);
    color: var(--ks-color-gray-400);
  }
  :where(.dark) .ks-social-icon:hover {
    background-color: var(--ks-color-gray-700);
    color: var(--ks-color-white);
  }

  /* Social buttons (brand colors exception) */
  .ks-social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    transition: all 0.2s var(--ks-ease-standard);
  }
  .ks-social-facebook { background-color: #1877F2; }
  .ks-social-facebook:hover { background-color: #0d65d9; }
  .ks-social-twitter { background-color: #1DA1F2; }
  .ks-social-twitter:hover { background-color: #0d8bd9; }
  .ks-social-instagram { background: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737); }
  .ks-social-instagram:hover { opacity: 0.9; }
  .ks-social-youtube { background-color: #FF0000; }
  .ks-social-youtube:hover { background-color: #cc0000; }
  .ks-social-spotify { background-color: #1DB954; }
  .ks-social-spotify:hover { background-color: #169c46; }
  .ks-social-linkedin { background-color: #0A66C2; }
  .ks-social-linkedin:hover { background-color: #004182; }
  .ks-social-mastodon { background-color: #6364FF; }
  .ks-social-mastodon:hover { background-color: #563ACC; }
  .ks-social-globe { background-color: var(--ks-color-gray-700); }
  .ks-social-globe:hover { background-color: var(--ks-color-gray-600); }

  /* Stat card */
  .ks-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-4);
    border-radius: var(--ks-radius-md);
    background: linear-gradient(135deg, var(--ks-color-primary-50), var(--ks-color-secondary-50));
    border: 1px solid var(--ks-color-primary-200);
    transition: all 0.2s var(--ks-ease-standard);
    cursor: pointer;
  }
  .ks-stat-card:hover {
    box-shadow: var(--ks-shadow-lg);
    transform: scale(1.05);
  }

  /* Stat card color modifiers */
  .ks-stat-card--primary {
    background: var(--ks-color-primary-50);
    border-color: var(--ks-color-primary-200);
  }
  .ks-stat-card--secondary {
    background: var(--ks-color-secondary-50);
    border-color: var(--ks-color-secondary-200);
  }
  .ks-stat-card--tertiary {
    background: var(--ks-color-tertiary-100);
    border-color: var(--ks-color-tertiary-300);
  }
  .ks-stat-card--accent {
    background: var(--ks-color-accent-50);
    border-color: var(--ks-color-accent-100);
  }

  :where(.dark) .ks-stat-card--primary {
    background: color-mix(in srgb, var(--ks-color-primary-900) 50%, var(--ks-color-surface-card));
    border-color: var(--ks-color-primary-800);
  }
  :where(.dark) .ks-stat-card--secondary {
    background: color-mix(in srgb, var(--ks-color-secondary-900) 50%, var(--ks-color-surface-card));
    border-color: var(--ks-color-secondary-800);
  }
  :where(.dark) .ks-stat-card--tertiary {
    background: color-mix(in srgb, var(--ks-color-tertiary-900) 50%, var(--ks-color-surface-card));
    border-color: var(--ks-color-tertiary-800);
  }

  /* Stat number inside stat cards; color inherits so ks-text-* can override. */
  .ks-stat-value {
    font-size: var(--ks-font-size-3xl);
    font-weight: var(--ks-font-weight-strong);
    line-height: 1.1;
  }

  /* Value display (large stat numbers) */
  .ks-value-display {
    display: block;
    color: var(--ks-color-primary-600);
    font-family: var(--ks-font-body);
    font-size: clamp(2.25rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1;
  }

  /* Slider arrows */
  .ks-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    background-color: var(--ks-color-overlay-light);
    color: white;
    padding: var(--ks-space-2);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s var(--ks-ease-standard);
  }
  .ks-slider-arrow:hover {
    background-color: var(--ks-color-overlay-subtle);
  }
  .ks-slider-arrow-prev { left: var(--ks-space-4); }
  .ks-slider-arrow-next { right: var(--ks-space-4); }

  /* Step indicators */
  .ks-step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ks-font-size-sm);
    font-weight: var(--ks-font-weight-strong);
    flex-shrink: 0;
  }
  .ks-step-pending {
    background-color: var(--ks-color-gray-200);
    color: var(--ks-color-gray-500);
  }
  .ks-step-current {
    background-color: var(--ks-color-primary-600);
    color: white;
    box-shadow: var(--ks-shadow-md);
  }
  .ks-step-complete {
    background-color: var(--ks-color-primary-600);
    color: white;
  }
  .ks-connector-complete {
    height: 2px;
    background-color: var(--ks-color-primary-600);
  }
  .ks-connector-pending {
    height: 2px;
    background-color: var(--ks-color-gray-200);
  }

  /* Media thumbnail */
  .ks-media-thumb {
    width: 6rem;
    height: 6rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
  }

  /* Characteristics grid (discipline term page) */
  .characteristics-grid .field__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .characteristics-grid .field__items {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .characteristics-grid .field__items {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ============================================
     VISIBILITY
     ============================================ */
  .ks-hide { display: none; }

  /* ks-show-lg/ks-hide-lg/xl/xxl consolidated in objects.css (5-tier system at 1024/1200/1536px) */

  .ks-show-tablet { display: none; }

  @media (min-width: 768px) {
    .ks-show-tablet { display: block; }
  }

  /* ============================================
     PADDING
     ============================================ */
  .ks-p-xs { padding: var(--ks-space-1); }
  .ks-p-sm { padding: var(--ks-space-2); }
  .ks-p-md { padding: var(--ks-space-4); }
  .ks-p-lg { padding: var(--ks-space-6); }
  .ks-p-xl { padding: var(--ks-space-8); }

  .ks-px-xs { padding-inline: var(--ks-space-1); }
  .ks-px-sm { padding-inline: var(--ks-space-2); }
  .ks-px-md { padding-inline: var(--ks-space-4); }
  .ks-px-lg { padding-inline: var(--ks-space-6); }

  .ks-py-xs { padding-block: var(--ks-space-1); }
  .ks-py-sm { padding-block: var(--ks-space-2); }
  .ks-py-lg { padding-block: var(--ks-space-6); }
  .ks-py-xl { padding-block: var(--ks-space-8); }

  .ks-pt-xs { padding-block-start: var(--ks-space-1); }
  .ks-pt-sm { padding-block-start: var(--ks-space-2); }
  .ks-pt-md { padding-block-start: var(--ks-space-4); }
  .ks-pt-lg { padding-block-start: var(--ks-space-6); }

  .ks-pb-xs { padding-block-end: var(--ks-space-1); }
  .ks-pb-sm { padding-block-end: var(--ks-space-2); }
  .ks-pb-md { padding-block-end: var(--ks-space-4); }
  .ks-pb-lg { padding-block-end: var(--ks-space-6); }
  .ks-pb-xl { padding-block-end: var(--ks-space-8); }

  /* ============================================
     MARGIN
     ============================================ */
  .ks-m-0 { margin: 0; }
  .ks-mt-0 { margin-block-start: 0; }
  .ks-mt-xs { margin-block-start: var(--ks-space-1); }
  .ks-mt-sm { margin-block-start: var(--ks-space-2); }
  .ks-mt-md { margin-block-start: var(--ks-space-4); }
  .ks-mt-lg { margin-block-start: var(--ks-space-6); }
  .ks-mt-xl { margin-block-start: var(--ks-space-8); }
  .ks-mt-2xl { margin-block-start: var(--ks-space-16); }
  .ks-mb-xs { margin-block-end: var(--ks-space-1); }
  .ks-mb-sm { margin-block-end: var(--ks-space-2); }
  .ks-mb-md { margin-block-end: var(--ks-space-4); }
  .ks-mb-lg { margin-block-end: var(--ks-space-6); }
  .ks-mb-xl { margin-block-end: var(--ks-space-8); }
  .ks-mb-2xl { margin-block-end: var(--ks-space-16); }
  .ks-ml-xs { margin-inline-start: var(--ks-space-1); }
  .ks-ml-sm { margin-inline-start: var(--ks-space-2); }
  .ks-ml-md { margin-inline-start: var(--ks-space-4); }
  .ks-ml-lg { margin-inline-start: var(--ks-space-6); }
  .ks-ml-xl { margin-inline-start: var(--ks-space-8); }
  .ks-my-xs { margin-block: var(--ks-space-1); }
  .ks-my-sm { margin-block: var(--ks-space-2); }
  .ks-my-md { margin-block: var(--ks-space-4); }
  .ks-my-lg { margin-block: var(--ks-space-6); }
  .ks-mt-auto { margin-block-start: auto; }

  /* Numeric spacing scale: suffix = --ks-space-N token (1,2,3,4,5,6,8,10,12,16,20,24). */
  .ks-mt-1 { margin-block-start: var(--ks-space-1); }
  .ks-mt-2 { margin-block-start: var(--ks-space-2); }
  .ks-mt-3 { margin-block-start: var(--ks-space-3); }
  .ks-mt-4 { margin-block-start: var(--ks-space-4); }
  .ks-mt-5 { margin-block-start: var(--ks-space-5); }
  .ks-mt-6 { margin-block-start: var(--ks-space-6); }
  .ks-mt-8 { margin-block-start: var(--ks-space-8); }
  .ks-mt-10 { margin-block-start: var(--ks-space-10); }
  .ks-mt-12 { margin-block-start: var(--ks-space-12); }
  .ks-mt-16 { margin-block-start: var(--ks-space-16); }
  .ks-mt-20 { margin-block-start: var(--ks-space-20); }
  .ks-mt-24 { margin-block-start: var(--ks-space-24); }
  .ks-mb-0 { margin-block-end: 0; }
  .ks-mb-1 { margin-block-end: var(--ks-space-1); }
  .ks-mb-2 { margin-block-end: var(--ks-space-2); }
  .ks-mb-3 { margin-block-end: var(--ks-space-3); }
  .ks-mb-4 { margin-block-end: var(--ks-space-4); }
  .ks-mb-5 { margin-block-end: var(--ks-space-5); }
  .ks-mb-6 { margin-block-end: var(--ks-space-6); }
  .ks-mb-8 { margin-block-end: var(--ks-space-8); }
  .ks-mb-10 { margin-block-end: var(--ks-space-10); }
  .ks-mb-12 { margin-block-end: var(--ks-space-12); }
  .ks-mb-16 { margin-block-end: var(--ks-space-16); }
  .ks-mb-20 { margin-block-end: var(--ks-space-20); }
  .ks-mb-24 { margin-block-end: var(--ks-space-24); }
  .ks-my-1 { margin-block: var(--ks-space-1); }
  .ks-my-2 { margin-block: var(--ks-space-2); }
  .ks-my-3 { margin-block: var(--ks-space-3); }
  .ks-my-4 { margin-block: var(--ks-space-4); }
  .ks-my-5 { margin-block: var(--ks-space-5); }
  .ks-my-6 { margin-block: var(--ks-space-6); }
  .ks-my-8 { margin-block: var(--ks-space-8); }
  .ks-my-10 { margin-block: var(--ks-space-10); }
  .ks-my-12 { margin-block: var(--ks-space-12); }
  .ks-my-16 { margin-block: var(--ks-space-16); }
  .ks-my-20 { margin-block: var(--ks-space-20); }
  .ks-my-24 { margin-block: var(--ks-space-24); }
  .ks-p-1 { padding: var(--ks-space-1); }
  .ks-p-2 { padding: var(--ks-space-2); }
  .ks-p-3 { padding: var(--ks-space-3); }
  .ks-p-4 { padding: var(--ks-space-4); }
  .ks-p-5 { padding: var(--ks-space-5); }
  .ks-p-6 { padding: var(--ks-space-6); }
  .ks-p-8 { padding: var(--ks-space-8); }
  .ks-p-10 { padding: var(--ks-space-10); }
  .ks-p-12 { padding: var(--ks-space-12); }
  .ks-p-16 { padding: var(--ks-space-16); }
  .ks-p-20 { padding: var(--ks-space-20); }
  .ks-p-24 { padding: var(--ks-space-24); }
  .ks-px-1 { padding-inline: var(--ks-space-1); }
  .ks-px-2 { padding-inline: var(--ks-space-2); }
  .ks-px-3 { padding-inline: var(--ks-space-3); }
  .ks-px-4 { padding-inline: var(--ks-space-4); }
  .ks-px-5 { padding-inline: var(--ks-space-5); }
  .ks-px-6 { padding-inline: var(--ks-space-6); }
  .ks-px-8 { padding-inline: var(--ks-space-8); }
  .ks-px-10 { padding-inline: var(--ks-space-10); }
  .ks-px-12 { padding-inline: var(--ks-space-12); }
  .ks-px-16 { padding-inline: var(--ks-space-16); }
  .ks-px-20 { padding-inline: var(--ks-space-20); }
  .ks-px-24 { padding-inline: var(--ks-space-24); }
  .ks-py-1 { padding-block: var(--ks-space-1); }
  .ks-py-2 { padding-block: var(--ks-space-2); }
  .ks-py-3 { padding-block: var(--ks-space-3); }
  .ks-py-4 { padding-block: var(--ks-space-4); }
  .ks-py-5 { padding-block: var(--ks-space-5); }
  .ks-py-6 { padding-block: var(--ks-space-6); }
  .ks-py-8 { padding-block: var(--ks-space-8); }
  .ks-py-10 { padding-block: var(--ks-space-10); }
  .ks-py-12 { padding-block: var(--ks-space-12); }
  .ks-py-16 { padding-block: var(--ks-space-16); }
  .ks-py-20 { padding-block: var(--ks-space-20); }
  .ks-py-24 { padding-block: var(--ks-space-24); }
  .ks-gap-1 { gap: var(--ks-space-1); }
  .ks-gap-2 { gap: var(--ks-space-2); }
  .ks-gap-3 { gap: var(--ks-space-3); }
  .ks-gap-4 { gap: var(--ks-space-4); }
  .ks-gap-5 { gap: var(--ks-space-5); }
  .ks-gap-6 { gap: var(--ks-space-6); }
  .ks-gap-8 { gap: var(--ks-space-8); }
  .ks-gap-10 { gap: var(--ks-space-10); }
  .ks-gap-12 { gap: var(--ks-space-12); }
  .ks-gap-16 { gap: var(--ks-space-16); }
  .ks-gap-20 { gap: var(--ks-space-20); }
  .ks-gap-24 { gap: var(--ks-space-24); }

  /* ============================================
     POSITION
     ============================================ */
  .ks-absolute { position: absolute; }
  .ks-fixed { position: fixed; }
  .ks-sticky-top { position: sticky; top: 0; }
  .ks-inset-0 { inset: 0; }

  /* ============================================
     BORDER
     ============================================ */
  .ks-border { border: 1px solid var(--ks-color-border-default); }
  .ks-border-t { border-block-start: 1px solid var(--ks-color-border-subtle); }
  .ks-border-top { border-block-start: 1px solid var(--ks-color-border-subtle); }
  :where(.dark) .ks-border-top { border-color: var(--ks-color-gray-700); }
  .ks-border-b { border-block-end: 1px solid var(--ks-color-border-subtle); }
  .ks-border-block-end { border-block-end: 1px solid var(--ks-color-border-subtle); }
  .ks-border-l { border-inline-start: 1px solid var(--ks-color-border-subtle); }
  .ks-border-r { border-inline-end: 1px solid var(--ks-color-border-subtle); }
  .ks-border-primary { border-color: var(--ks-color-primary-500); }
  .ks-border-warning { border-color: var(--ks-color-warning, #f59e0b); }

  /* ============================================
     FLEX
     ============================================ */
  .ks-flex { display: flex; }
  .ks-inline-flex { display: inline-flex; }
  .ks-flex-col { flex-direction: column; }
  .ks-flex-row { flex-direction: row; }
  .ks-flex-wrap { flex-wrap: wrap; }
  .ks-grow { flex-grow: 1; }
  .ks-shrink-0 { flex-shrink: 0; }
  .ks-items-center { align-items: center; }
  .ks-items-start { align-items: flex-start; }
  .ks-items-end { align-items: flex-end; }
  .ks-justify-center { justify-content: center; }
  .ks-justify-between { justify-content: space-between; }
  .ks-justify-end { justify-content: flex-end; }

  /* ============================================
     TEXT ALIGNMENT (Responsive)
     ============================================ */
  .ks-text-left { text-align: left; }
  .ks-text-right { text-align: right; }
  .ks-text-start { text-align: start; }
  .ks-text-center-mobile { text-align: center; }
  @media (min-width: 768px) {
    .ks-text-center-mobile { text-align: start; }
  }
  .ks-text-end-lg { text-align: start; }
  @media (min-width: 1024px) {
    .ks-text-end-lg { text-align: end; }
  }

  /* ============================================
     BACKGROUND
     ============================================ */
  .ks-bg-dark { background-color: var(--ks-color-surface-strong); }
  .ks-bg-default { background-color: var(--ks-color-surface-page); }
  .ks-bg-error { background-color: var(--ks-color-danger-500); }
  .ks-bg-secondary-subtle { background-color: var(--ks-color-secondary-50); }

  /* ============================================
     ROUNDED
     ============================================ */
  .ks-rounded { border-radius: var(--ks-radius-md); }
  .ks-rounded-sm { border-radius: var(--ks-radius-sm); }
  .ks-rounded-md { border-radius: var(--ks-radius-md); }
  .ks-rounded-lg { border-radius: var(--ks-radius-lg); }
  .ks-rounded-xl { border-radius: var(--ks-radius-xl); }
  .ks-rounded-2xl { border-radius: 1rem; }
  .ks-rounded-full { border-radius: var(--ks-radius-full); }

  /* ============================================
     SHADOW
     ============================================ */
  .ks-shadow { box-shadow: var(--ks-shadow-sm); }
  .ks-shadow-md { box-shadow: var(--ks-shadow-md); }
  .ks-shadow-lg { box-shadow: var(--ks-shadow-lg); }

  /* ============================================
     OVERFLOW
     ============================================ */
  .ks-overflow-auto { overflow: auto; }
  .ks-overflow-x-auto { overflow-x: auto; }
  .ks-overflow-y-auto { overflow-y: auto; }

  /* ============================================
     Z-INDEX
     ============================================ */
  .ks-z-10 { z-index: 10; }
  .ks-z-20 { z-index: 20; }
  .ks-z-30 { z-index: 30; }
  .ks-z-40 { z-index: 40; }

  /* ============================================
     ANIMATION
     ============================================ */
  .ks-animate-spin { animation: ks-spin 1s linear infinite; }
  .ks-animate-bounce { animation: ks-bounce 1s infinite; }
  .ks-animate-pulse { animation: ks-pulse 2s ease-in-out infinite; }
  /* Loading spinner */
  .ks-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--ks-color-gray-200);
    border-block-start-color: var(--ks-color-primary-600);
    border-radius: 50%;
    animation: ks-spin 0.8s linear infinite;
  }

  @keyframes ks-spin { to { transform: rotate(360deg); } }
  @keyframes ks-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
  }
  @keyframes ks-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes ks-blink { 50% { opacity: 0; } }
  @keyframes ks-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
  }
  @keyframes ks-scale-in {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .ks-blink { animation: ks-blink 1s step-end infinite; }
  .ks-animate-float { animation: ks-float 6s ease-in-out infinite; }
  .ks-animate-float-delay-1 { animation: ks-float 6s ease-in-out 1s infinite; }
  .ks-animate-float-delay-2 { animation: ks-float 6s ease-in-out 2s infinite; }
  .ks-animate-float-delay-3 { animation: ks-float 6s ease-in-out 3s infinite; }
  .ks-animate-scale-in { animation: ks-scale-in 0.2s ease-out forwards; }

  /* ============================================
     MISC UTILITIES
     ============================================ */
  .ks-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; }
  .ks-pointer { cursor: pointer; }
  .ks-cursor-default { cursor: default; }
  .ks-whitespace-nowrap { white-space: nowrap; }
  .ks-capitalize { text-transform: capitalize; }
  .ks-list-reset { list-style: none; padding: 0; margin: 0; }
  .ks-focus-ring:focus { outline: 2px solid var(--ks-color-primary-500); outline-offset: 2px; }
  .ks-indent { padding-inline-start: var(--ks-space-4); }
  .ks-opacity-0 { opacity: 0; }
  .ks-opacity-50 { opacity: 0.5; }
  .ks-rotate-180,
  .rotate-180 { transform: rotate(180deg); }
  .ks-transition { transition: all var(--ks-duration-base) var(--ks-ease-standard); }
  .ks-object-cover { object-fit: cover; }
  .ks-object-contain { object-fit: contain; }

  /* Additional utilities */
  .ks-flex-fill { flex: 1 1 0%; }
  .ks-flex-none { flex: none; }
  .ks-cluster-wrap { flex-wrap: wrap; }
  .ks-max-content { width: max-content; }
  .ks-max-prose { max-width: 65ch; }
  .ks-max-prose-lg { max-width: 75ch; }
  .ks-border-secondary { border-color: var(--ks-color-secondary-500); }

  /* ============================================
     MIGRATED UTILITIES (from old primitives.css)
     ============================================ */

  /* Text utilities */
  .ks-text-upper { text-transform: uppercase; letter-spacing: 0.05em; }
  .ks-text-italic { font-style: italic; }
  .ks-text-mono { font-family: var(--ks-font-mono); }
  .ks-text-xs { font-size: var(--ks-font-size-xs); }   /* 0.75rem */
  .ks-text-sm { font-size: var(--ks-font-size-sm); }   /* 0.875rem */
  .ks-text-base { font-size: var(--ks-font-size-base); } /* 1rem */
  .ks-text-lg { font-size: var(--ks-font-size-lg); }   /* 1.125rem */
  .ks-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ks-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; }

  /* Font utilities */
  .ks-font-heading { font-family: var(--ks-font-heading); }
  .ks-font-strong { font-weight: var(--ks-font-weight-strong); }

  /* Prose */
  .ks-prose { line-height: 1.7; color: var(--ks-color-text-default); }
  .ks-prose p + p { margin-top: var(--ks-space-4); }

  /* Layout utilities */
  .ks-block-center { margin-inline: auto; }
  .ks-min-h-md { min-block-size: 25rem; }
  .ks-min-w-0 { min-width: 0; }
  .ks-dim { opacity: 0.8; }
  .ks-scroll-y { overflow-y: auto; }
  .ks-scroll-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Dividers */
  .ks-divider-bottom { border-block-end: 1px solid var(--ks-color-border-subtle); padding-block-end: var(--ks-space-4); }
  .ks-divider-left { border-inline-start: 1px solid var(--ks-color-border-subtle); padding-inline-start: var(--ks-space-4); }
  :where(.dark) .ks-divider-left { border-color: var(--ks-color-gray-700); }

  /* Surface utilities */
  .ks-surface-inverse { padding: var(--ks-space-2) var(--ks-space-6); background-color: var(--ks-color-overlay-inverse); color: var(--ks-color-text-inverse); border-radius: var(--ks-radius-md); }
  .ks-surface-active { background-color: var(--ks-color-primary-50); }
  :where(.dark) .ks-surface-active { background-color: var(--ks-color-primary-900); }

  /* State utilities */
  .ks-is-muted { opacity: 0.5; pointer-events: none; }

  /* Row hover */
  .ks-row-hover { display: flex; align-items: center; gap: var(--ks-space-3); padding: var(--ks-space-3); border-radius: var(--ks-radius-md); background: var(--ks-color-white); transition: background-color var(--ks-duration-base) var(--ks-ease-standard); }
  .ks-row-hover:hover, .ks-row-hover:focus-visible { background-color: var(--ks-color-gray-50); }
  :where(.dark) .ks-row-hover { background: var(--ks-color-gray-800); }
  :where(.dark) .ks-row-hover:hover, :where(.dark) .ks-row-hover:focus-visible { background-color: var(--ks-color-gray-700); }

  /* Shadow utilities */
  .ks-shadow-none { box-shadow: none; }
  .ks-shadow-sm { box-shadow: var(--ks-shadow-sm); }
  .ks-shadow-xl { box-shadow: var(--ks-shadow-xl); }
  .ks-shadow-2xl { box-shadow: 0 25px 50px -12px var(--ks-color-overlay-light); }

  /* ==========================================================================
     Info Badge - icon + label + value layout
     ========================================================================== */

  .ks-info-badge {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
    color: var(--ks-color-text-default);
  }

  .ks-info-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ks-radius-full);
  }

  .ks-info-badge__label {
    margin: 0 0 var(--ks-space-1) 0;
    font-size: 0.75rem;
    font-weight: var(--ks-font-weight-strong);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ks-color-text-muted);
  }

  .ks-info-badge__value {
    font-size: 1.125rem;
    font-weight: var(--ks-font-weight-medium);
    color: var(--ks-color-text-strong);
  }

  @media (min-width: 768px) {
    .ks-info-badge__value {
      font-size: 1.25rem;
    }
  }

  /* ==========================================================================
     Truncated description with fade - for expandable content
     ========================================================================== */

  .ks-description-truncate {
    max-height: 6rem;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent);
  }

  .ks-description-truncate-lg {
    max-height: 25rem;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent);
  }

  .ks-description-truncate.is-expanded,
  .ks-description-truncate-lg.is-expanded {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ks-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: none;
    pointer-events: none;
  }

  .is-expanded .ks-fade-bottom {
    display: none;
  }

  /* ==========================================================================
     Progress Bar - track + fill with --progress custom property
     ========================================================================== */

  .ks-progress {
    inline-size: 100%;
    block-size: var(--ks-space-2);
    background-color: var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-full);
    overflow: hidden;
  }

  .ks-progress--sm {
    block-size: var(--ks-space-1);
  }

  .ks-progress--lg {
    block-size: var(--ks-space-3);
  }

  .ks-progress--xl {
    block-size: var(--ks-space-4);
  }

  .ks-progress-bar {
    display: block;
    block-size: 100%;
    inline-size: var(--progress, 0%);
    background-color: var(--ks-color-primary-600);
    border-radius: var(--ks-radius-full);
    transition: inline-size var(--ks-duration-slow) var(--ks-ease-standard);
  }

  .ks-progress-bar--complete,
  .ks-progress-bar--success {
    background-color: var(--ks-color-secondary-500);
  }

  /* ==========================================================================
     Toggle Button - Show more/less button for expandable content
     ========================================================================== */

  .ks-toggle-button {
    margin-block-start: var(--ks-space-4);
    color: var(--ks-color-primary-600);
    font-weight: 500;
  }

  .ks-toggle-button:hover {
    text-decoration: underline;
  }

  /* ==========================================================================
     Showcase - Full-width showcase sections with media backgrounds
     ========================================================================== */

  .ks-showcase {
    position: relative;
    overflow: hidden;
    background-color: var(--ks-color-surface-black);
    color: var(--ks-color-text-inverse);
  }

  .ks-showcase--half {
    min-block-size: 26rem;
    block-size: 50vh;
  }

  .ks-showcase--display {
    block-size: 25rem;
  }

  @media (min-width: 768px) {
    .ks-showcase--display {
      block-size: 31.25rem;
    }
  }

  .ks-showcase--split {
    display: grid;
  }

  /* ==========================================================================
     Callout - Information callout boxes
     ========================================================================== */

  .ks-callout {
    padding: var(--ks-space-4);
    border-radius: var(--ks-radius-lg);
    border: 1px solid transparent;
  }

  .ks-callout-primary {
    background: color-mix(in srgb, var(--ks-color-primary-500) 10%, transparent);
    border-color: var(--ks-color-primary-200);
    color: var(--ks-color-primary-700);
  }

  :where(.dark) .ks-callout-primary {
    background: color-mix(in srgb, var(--ks-color-primary-500) 15%, transparent);
    border-color: var(--ks-color-primary-800);
    color: var(--ks-color-primary-300);
  }

  .ks-callout-info {
    background: color-mix(in srgb, var(--ks-color-info-500) 10%, transparent);
    border-color: var(--ks-color-info-200);
    color: var(--ks-color-info-700);
  }

  :where(.dark) .ks-callout-info {
    background: color-mix(in srgb, var(--ks-color-info-500) 15%, transparent);
    border-color: var(--ks-color-info-800);
    color: var(--ks-color-info-300);
  }

  .ks-callout-warning {
    background: color-mix(in srgb, var(--ks-color-warning-500) 10%, transparent);
    border-color: var(--ks-color-warning-200);
    color: var(--ks-color-warning-700);
  }

  :where(.dark) .ks-callout-warning {
    background: color-mix(in srgb, var(--ks-color-warning-500) 15%, transparent);
    border-color: var(--ks-color-warning-800);
    color: var(--ks-color-warning-300);
  }

  .ks-callout--info {
    background: var(--ks-color-primary-50);
    border: 1px solid var(--ks-color-primary-200);
    color: var(--ks-color-primary-700);
  }

  :where(.dark) .ks-callout--info {
    background: var(--ks-color-primary-950);
    border-color: var(--ks-color-primary-800);
    color: var(--ks-color-primary-300);
  }

  .ks-callout--gradient {
    background: linear-gradient(135deg, var(--ks-color-primary-50), var(--ks-color-secondary-50));
    border-left: 4px solid var(--ks-color-primary-500);
  }

  :where(.dark) .ks-callout--gradient {
    background: linear-gradient(135deg, var(--ks-color-gray-800), var(--ks-color-gray-800));
  }

  /* ==========================================================================
     Alert - Status alert boxes
     ========================================================================== */

  .ks-alert {
    display: flex;
    gap: var(--ks-space-3);
    padding: var(--ks-space-4);
    border-radius: var(--ks-radius-md);
    border-inline-start: 4px solid var(--ks-accent, var(--ks-color-primary-500));
    background-color: color-mix(in srgb, var(--ks-accent, var(--ks-color-primary-500)) 10%, var(--ks-color-surface-card));
  }

  .ks-alert > svg {
    flex-shrink: 0;
    color: var(--ks-accent, var(--ks-color-primary-600));
  }

  .ks-alert--info {
    --ks-accent: var(--ks-color-info-500);
  }

  .ks-alert--success {
    --ks-accent: var(--ks-color-secondary-500);
  }

  .ks-alert--warning {
    --ks-accent: var(--ks-color-tertiary-500);
  }

  .ks-alert--danger {
    --ks-accent: var(--ks-color-danger-500);
  }

  :where(.dark) .ks-alert {
    background-color: color-mix(in srgb, var(--ks-accent, var(--ks-color-primary-500)) 15%, var(--ks-color-surface-card));
  }

  .ks-alert-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-2);
    padding: var(--ks-space-3);
    background: var(--ks-color-warning-50);
    border: 1px solid var(--ks-color-warning-200);
    border-radius: var(--ks-radius-lg);
    font-size: 0.875rem;
    color: var(--ks-color-warning-800);
  }

  :where(.dark) .ks-alert-warning {
    background: color-mix(in srgb, var(--ks-color-warning-900) 20%, transparent);
    border-color: var(--ks-color-warning-800);
    color: var(--ks-color-warning-200);
  }

  .ks-alert-success {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-2);
    padding: var(--ks-space-3);
    background: var(--ks-color-success-50, #f0fdf4);
    border: 1px solid var(--ks-color-success-200, #bbf7d0);
    border-radius: var(--ks-radius-lg);
    font-size: 0.875rem;
    color: var(--ks-color-success-800, #166534);
  }

  :where(.dark) .ks-alert-success {
    background: color-mix(in srgb, var(--ks-color-success-900) 20%, transparent);
    border-color: var(--ks-color-success-800);
    color: var(--ks-color-success-200);
  }

  .ks-alert-error {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-2);
    padding: var(--ks-space-3);
    background: var(--ks-color-danger-50, #fef2f2);
    border: 1px solid var(--ks-color-danger-200, #fecaca);
    border-radius: var(--ks-radius-lg);
    font-size: 0.875rem;
    color: var(--ks-color-danger-800, #991b1b);
  }

  :where(.dark) .ks-alert-error {
    background: color-mix(in srgb, var(--ks-color-danger-900) 20%, transparent);
    border-color: var(--ks-color-danger-800);
    color: var(--ks-color-danger-200);
  }

  /* ==========================================================================
     Feedback Tooltip and Toast - User feedback notifications
     ========================================================================== */

  .ks-feedback-tooltip {
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--ks-space-2) var(--ks-space-4);
    border-radius: var(--ks-radius-lg);
    font-size: var(--ks-font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--ks-shadow-lg);
    transition: opacity var(--ks-duration-base) var(--ks-ease-standard);
    color: var(--ks-color-white);
  }

  .ks-feedback-tooltip-success {
    background-color: var(--ks-color-green-600);
  }

  .ks-feedback-tooltip-error {
    background-color: var(--ks-color-red-600);
  }

  .ks-toast {
    position: fixed;
    bottom: var(--ks-space-4);
    right: var(--ks-space-4);
    padding: var(--ks-space-2) var(--ks-space-4);
    border-radius: var(--ks-radius-lg);
    box-shadow: var(--ks-shadow-lg);
    z-index: 50;
    color: var(--ks-color-white);
    animation: ks-fade-in var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-toast-success {
    background-color: var(--ks-color-green-600);
  }

  .ks-toast-error {
    background-color: var(--ks-color-red-600);
  }

  @keyframes ks-fade-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

}

/* ==========================================================================
   Venue Map Popup - Leaflet map popup styling for event venues
   Outside @layer to override Leaflet's unlayered defaults
   ========================================================================== */

.venue-map-popup .leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.venue-map-popup .leaflet-popup-content {
  margin: 0;
}

.venue-map-popup .leaflet-popup-tip {
  background: var(--ks-color-primary-50);
  box-shadow: -8px 8px 24px rgba(15, 23, 42, 0.14);
}

.venue-popup {
  width: min(19rem, calc(100vw - 5rem));
  overflow: hidden;
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-xl);
}

.venue-popup--event {
  background: linear-gradient(180deg, var(--ks-color-primary-50), var(--ks-color-primary-100));
}

.venue-popup__inner {
  padding: var(--ks-space-4) var(--ks-space-4) var(--ks-space-3);
}

.venue-popup__venue {
  margin: 0;
  color: var(--ks-color-text-strong);
  font-family: var(--ks-font-heading);
  font-size: var(--ks-font-size-lg);
  font-weight: var(--ks-font-weight-strong);
  line-height: 1.25;
}

.venue-map-popup .leaflet-popup-content p.venue-popup__address {
  margin: var(--ks-space-1) 0;
  color: var(--ks-color-text-muted);
  font-size: var(--ks-font-size-base);
  line-height: 1.55;
}

.venue-popup__directions {
  display: inline-flex;
  align-items: center;
  margin-top: var(--ks-space-2);
  color: var(--ks-color-primary-600);
  font-size: var(--ks-font-size-sm);
  font-weight: var(--ks-font-weight-strong);
  text-decoration: none;
}

.venue-popup__directions:hover {
  text-decoration: underline;
}

.venue-popup__ticker {
  margin-top: var(--ks-space-3);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ks-radius-md);
  background: linear-gradient(135deg, var(--ks-color-primary-700), var(--ks-color-primary-800), var(--ks-color-primary-900));
}

.venue-popup__ticker-track {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-3);
  min-width: max-content;
  padding: var(--ks-space-3) var(--ks-space-4);
  color: var(--ks-color-text-inverse);
  animation: venuePopupTickerLtr 18s linear infinite;
  will-change: transform;
}

.venue-popup__ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-2);
  white-space: nowrap;
}

.venue-popup__ticker-title {
  font-size: var(--ks-font-size-base);
  font-weight: var(--ks-font-weight-strong);
  line-height: 1.2;
}

.venue-popup__ticker-meta {
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--ks-font-size-sm);
  font-weight: var(--ks-font-weight-medium);
  line-height: 1.2;
}

.venue-popup__ticker-separator {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--ks-font-size-sm);
  font-weight: var(--ks-font-weight-strong);
}

@keyframes venuePopupTickerLtr {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--ks-space-1))); }
}

@media (prefers-reduced-motion: reduce) {
  .venue-popup__ticker-track {
    animation: none;
  }
}

/* Floating musical notes decorative element */
.ks-floating-notes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ks-floating-note {
  position: absolute;
  color: var(--ks-color-primary-400);
  opacity: 0.25;
  animation: ks-float 6s ease-in-out infinite;
}

.ks-floating-note--1 {
  top: 10%;
  left: 15%;
  opacity: 0.3;
  color: var(--ks-color-primary-400);
}

.ks-floating-note--2 {
  top: 20%;
  right: 20%;
  opacity: 0.2;
  color: var(--ks-color-secondary-400);
  animation-delay: 1s;
}

.ks-floating-note--3 {
  top: 50%;
  left: 10%;
  opacity: 0.25;
  color: var(--ks-color-primary-500);
  animation-delay: 2s;
}

.ks-floating-note--4 {
  top: 60%;
  right: 15%;
  opacity: 0.15;
  color: var(--ks-color-secondary-500);
  animation-delay: 3s;
}

.ks-floating-note--5 {
  bottom: 15%;
  left: 25%;
  opacity: 0.2;
  color: var(--ks-color-primary-300);
}

.ks-floating-note--6 {
  bottom: 25%;
  right: 25%;
  opacity: 0.25;
  color: var(--ks-color-secondary-300);
  animation-delay: 1s;
}

:where(.dark) .ks-floating-note--1 { color: var(--ks-color-primary-600); }
:where(.dark) .ks-floating-note--2 { color: var(--ks-color-secondary-600); }
:where(.dark) .ks-floating-note--3 { color: var(--ks-color-primary-700); }
:where(.dark) .ks-floating-note--4 { color: var(--ks-color-secondary-700); }
:where(.dark) .ks-floating-note--5 { color: var(--ks-color-primary-600); }
:where(.dark) .ks-floating-note--6 { color: var(--ks-color-secondary-600); }

  /* ===== Phase 4 RESTORED utilities (2026-07-06) ===== */

  /* Font size utilities */
  .ks-text-xs { font-size: 0.75rem; line-height: 1rem; }
  .ks-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .ks-text-base { font-size: 1rem; line-height: 1.5rem; }
  .ks-text-lg { font-size: 1.125rem; line-height: 1.75rem; }

  /* Font weight utilities */
  .ks-font-medium { font-weight: 500; }
  .ks-font-semibold { font-weight: 600; }
  .ks-font-bold { font-weight: 700; }

  /* Transition utilities */
  .ks-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--ks-ease-standard);
    transition-duration: 150ms;
  }
  .ks-transition-all {
    transition-property: all;
    transition-timing-function: var(--ks-ease-standard);
    transition-duration: 150ms;
  }
  .ks-transition-transform {
    transition-property: transform;
    transition-timing-function: var(--ks-ease-standard);
    transition-duration: 150ms;
  }

  /* Margin auto utilities */
  .ks-mx-auto { margin-inline: auto; }
  .ks-my-auto { margin-block: auto; }

  /* Additional padding utilities */
  .ks-px-4 { padding-inline: 1rem; }
  .ks-px-6 { padding-inline: 1.5rem; }
  .ks-px-8 { padding-inline: 2rem; }

  /* Flexbox utilities */
  .ks-flex { display: flex; }
  .ks-inline-flex { display: inline-flex; }
  .ks-flex-col { flex-direction: column; }
  .ks-flex-row { flex-direction: row; }
  .ks-flex-wrap { flex-wrap: wrap; }
  .ks-flex-nowrap { flex-wrap: nowrap; }
  .ks-items-center { align-items: center; }
  .ks-items-start { align-items: flex-start; }
  .ks-items-end { align-items: flex-end; }
  .ks-justify-center { justify-content: center; }
  .ks-justify-between { justify-content: space-between; }
  .ks-justify-start { justify-content: flex-start; }
  .ks-justify-end { justify-content: flex-end; }
  .ks-flex-shrink-0 { flex-shrink: 0; }
  .ks-flex-grow { flex-grow: 1; }

  /* Text color utilities */
  .ks-text-gray-900 { color: var(--ks-color-gray-900); }
  .ks-text-gray-700 { color: var(--ks-color-gray-700); }
  .ks-text-gray-500 { color: var(--ks-color-gray-500); }
  .ks-text-white { color: #fff; }
  :where(.dark) .ks-text-white { color: #fff; }

  /* Position utilities */
  .ks-relative { position: relative; }
  .ks-absolute { position: absolute; }
  .ks-fixed { position: fixed; }
  .ks-sticky { position: sticky; }
  .ks-inset-0 { inset: 0; }
  .ks-top-0 { top: 0; }
  .ks-right-0 { right: 0; }
  .ks-bottom-0 { bottom: 0; }
  .ks-left-0 { left: 0; }

  /* Background utilities */
  .ks-bg-white { background-color: #fff; }
  :where(.dark) .ks-bg-white { background-color: var(--ks-color-gray-800); }

  /* Additional max-width utilities */
  .ks-max-w-2xl { max-width: 42rem; }
  .ks-max-w-3xl { max-width: 56rem; }

  /* Scroll margin utilities */
  .ks-scroll-mt-md { scroll-margin-top: var(--ks-space-md, 1rem); }
  .ks-scroll-mt-lg { scroll-margin-top: var(--ks-space-lg, 1.5rem); }

  /* Border-radius utilities */
  .ks-radius-sm { border-radius: var(--ks-radius-sm); }
  .ks-radius-md { border-radius: var(--ks-radius-md); }
  .ks-radius-lg { border-radius: var(--ks-radius-lg); }
  .ks-radius-xl { border-radius: var(--ks-radius-xl); }
  .ks-radius-full { border-radius: 9999px; }

  /* Horizontal margin utilities */
  .ks-mx-xs { margin-inline: var(--ks-space-1, 0.25rem); }
  .ks-mx-sm { margin-inline: var(--ks-space-2, 0.5rem); }
  .ks-mx-md { margin-inline: var(--ks-space-4, 1rem); }
  .ks-mx-lg { margin-inline: var(--ks-space-6, 1.5rem); }

  /* Margin utilities */
  .ks-m-xs { margin: var(--ks-space-1, 0.25rem); }
  .ks-m-sm { margin: var(--ks-space-2, 0.5rem); }
  .ks-m-md { margin: var(--ks-space-4, 1rem); }
  .ks-m-lg { margin: var(--ks-space-6, 1.5rem); }

  /* Divide utilities */
  .ks-divide-y > * + * { border-top: 1px solid var(--ks-color-border-subtle); }
  :where(.dark) .ks-divide-y > * + * { border-color: var(--ks-color-gray-700); }
  .ks-divide-x > * + * { border-left: 1px solid var(--ks-color-border-subtle); }
  :where(.dark) .ks-divide-x > * + * { border-color: var(--ks-color-gray-700); }

  /* Status background utilities - light variants */
  .ks-bg-warning-light { background-color: rgba(var(--ks-color-warning-rgb, 245,158,11), 0.1); }
  .ks-bg-success-light { background-color: rgba(var(--ks-color-success-rgb, 34,197,94), 0.1); }
  .ks-bg-danger-light { background-color: rgba(var(--ks-color-danger-rgb, 239,68,68), 0.1); }
  .ks-bg-warning-subtle { background-color: rgba(var(--ks-color-warning-rgb, 245,158,11), 0.05); }

  /* Badge variants */
  .ks-badge-danger { background-color: var(--ks-color-danger, #ef4444); color: #fff; }

  /* Focus utilities */
  .ks-focus-visible:focus-visible { outline: 2px solid var(--ks-color-primary-500); outline-offset: 2px; }

  /* Grid utilities */
  .ks-grid-2-4-6 { display: grid; gap: var(--ks-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 768px) { .ks-grid-2-4-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .ks-grid-2-4-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .ks-grid-square > * { aspect-ratio: 1; }

  /* Stack alignment variants */
  .ks-stack-center { display: flex; flex-direction: column; align-items: center; }
  .ks-stack-end { display: flex; flex-direction: column; align-items: flex-end; }
}