/* ====================================================
   flare.css - Minimal Framework 
   ==================================================== */

/* ----------------------------
   CSS Layers
   ---------------------------- */
@layer reset, base, components, utilities;

/* ----------------------------
   Reset Layer (Truly Minimal)
   ---------------------------- */
@layer reset {
  
  html {
    font-family:
      system-ui,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji';
    line-height: 1.5; /* Adjusted line height for better readability */
    -webkit-text-size-adjust: 100%;
  }

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

  body {
    margin: 0;
  }

  /* Preserve custom responsive media reset */
  img, picture, video {
    max-width: 100%;
    display: block;
    height: auto;
  }

  /* Custom list reset (only structural margin/padding left) */
  ul, ol {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem; /* Increased indent slightly for visibility */
    /* list-style: none REMOVED - Preserves default bullets/numbers */
  }

  /* Minimal table reset (visual styling moved to components) */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  /* Preserve accessible focus styling */
  :focus-visible {
    outline: 3px solid rgba(102,126,234,0.25);
    outline-offset: 2px;
  }
}

/* ----------------------------
   Base Layer - Theme Tokens & Global Styles
   ---------------------------- */
@layer base {
  
  :root {
    /* breakpoints */
    --flare-breakpoint-sm: 640px;
    --flare-breakpoint-md: 768px; /* Target for main layout shift */
    --flare-breakpoint-lg: 1024px;
    --flare-breakpoint-xl: 1280px;

    /* colors */
    --flare-primary: #1976d2;
    --flare-primary-600: #1565c0;
    --flare-secondary: #424242;
    --flare-accent: #82B1FF;
    --flare-bg: #ffffff;
    --flare-surface: #ffffff;
    --flare-surface-alt: #f7f8fb;
    --flare-text: #111827;
    --flare-text-muted: #4b5563;
    --flare-border: #e6e8ee;
    --flare-success: #059669;
    --flare-error: #dc2626;

    /* spacing - t-shirt sizes */
    --flare-space-xs: 6px;
    --flare-space-sm: 8px;
    --flare-space-md: 16px;
    --flare-space-lg: 24px;
    --flare-space-xl: 40px;
    --flare-space-2xl: 48px;
    --flare-space-3xl: 64px;
    --flare-space-4xl: 80px;

    /* radii - complete t-shirt scale */
    --flare-radius-xs: 4px;
    --flare-radius-sm: 6px;
    --flare-radius-md: 10px;
    --flare-radius-lg: 12px;
    --flare-radius-xl: 16px;

    /* max-widths - ch-based for typography */
    --flare-max-w-xs: 45ch;
    --flare-max-w-sm: 60ch;
    --flare-max-w-md: 75ch;
    --flare-max-w-lg: 90ch;
    --flare-max-w-xl: 120ch;

    /* container & layout */
    --flare-container-max: 1200px;
    --flare-nav-height: 64px;
    --flare-grid-min: 240px;

    /* shadows */
    --flare-shadow-sm: 0 2px 6px rgba(16,24,40,0.06);
    --flare-shadow-md: 0 6px 18px rgba(16,24,40,0.08);
  }

  /* Dark theme */
  .flare-dark {
    --flare-primary: #7b6bff;
    --flare-accent: #b7aaff;
    --flare-bg: #0b1020;
    --flare-surface: #0f1724;
    --flare-surface-alt: #0b1220;
    --flare-text: #e6eef8;
    --flare-text-muted: #a8b3c7;
    --flare-border: rgba(255,255,255,0.06);
  }
  
  /* ==========================================================
     BASE TYPOGRAPHY STYLING (New)
     ========================================================== */
    /* -----------------------------------------
      Headings
    ----------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
      margin: 0;                 /* clean slate */
      margin-bottom: 0.4em;      /* consistent bottom spacing */
      font-weight: 700;
      line-height: 1.2;
      color: var(--flare-text);
    }

    /* Compact modern scale */
    h1 {
      font-size: 2.25rem;
      margin-top: 1.75em;
    }

    h2 {
      font-size: 1.75rem;
      margin-top: 1.5em;
    }

    h3 {
      font-size: 1.35rem;
      margin-top: 1.25em;
    }

    h4 {
      font-size: 1.15rem;
      margin-top: 1em;
    }

    h5 {
      font-size: 1.05rem;
      margin-top: 0.75em;
    }

    h6 {
      font-size: 0.95rem;
      margin-top: 0.5em;
      color: var(--flare-text-muted);
      font-weight: 600; /* subtle distinction */
    }


    /* -----------------------------------------
      Paragraphs
    ----------------------------------------- */
    p {
      margin: 0;
      margin-bottom: 1.25em;
      max-width: var(--flare-max-w-md);
      color: var(--flare-text-muted);
      line-height: 1.6;
    }

  /* BASE LINK STYLING */
  a {
    color: var(--flare-primary);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  a:hover {
    color: var(--flare-primary-600);
    text-decoration: underline;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ----------------------------
   Components Layer
   ---------------------------- */
@layer components {
  /* Container */
  .flare-container {
    width: min(var(--flare-container-max), 100%); /* Use 100% and internal padding for mobile */
    margin: 0 auto;
    padding: 0 var(--flare-space-md);
  }
  
  /* Mobile container padding adjustment (unified approach) */
  @media (max-width: 768px) {
    .flare-container {
      padding: 0 var(--flare-space-sm); /* Tighten padding slightly on small screens */
    }
  }
  
  /* ==========================================================
     LAYOUT STRUCTURE (Sidebar/Content) - Essential for Docs
     ========================================================== */

  .flare-main {
    /* Mobile Base */
    display: flex;
    flex-wrap: wrap; 
    gap: var(--flare-space-lg);
    
    /* Ensure centering on desktop and overall max width */
    max-width: var(--flare-container-max);
    margin: var(--flare-space-xl) auto 0;
    padding: 0 var(--flare-space-sm); /* Base padding for mobile */
  }

  .flare-sidebar {
    /* MOBILE-FIRST: Sidebar takes full width by default when wrapped */
    width: 100%;
    flex: 1 1 100%; 
    position: static;
    
    /* Visual styles */
    padding: var(--flare-space-lg);
    background: var(--flare-surface-alt);
    margin-bottom: var(--flare-space-lg);
    border-bottom: 1px solid var(--flare-border);
  }

  .flare-content {
    flex: 1 1 0%; 
    min-width: 0; 
  }

  /* MD Breakpoint (768px and up) Layout Overrides */
  @media (min-width: 768px) {
    
    .flare-main {
      padding: 0; /* Remove base padding when container handles it */
    }

    .flare-sidebar {
      /* DESKTOP OVERRIDES: Fixed width and sticky position restored */
      width: 260px;
      flex: 0 0 260px;
      
      position: sticky; 
      top: calc(var(--flare-nav-height) + var(--flare-space-sm));
      height: calc(100vh - var(--flare-nav-height) - var(--flare-space-sm));
      overflow: auto;
      
      /* Visual Overrides */
      border-right: 1px solid var(--flare-border);
      border-bottom: none;
      margin-bottom: 0;
      background: var(--flare-surface);
      padding: var(--flare-space-lg) 0 var(--flare-space-lg) var(--flare-space-lg); /* Padding on top/bottom/left only */
    }
  }

  /* Sidebar Typography (List reset added here) */
  .flare-sidebar ul,
  .flare-sidebar ol {
    list-style: none; /* Apply list reset for navigation */
    padding-left: 0;
    margin: var(--flare-space-md) 0;
  }
  
  .flare-sidebar h3 {
    font-size: 0.85rem;
    color: var(--flare-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--flare-space-sm);
    padding-left: var(--flare-space-md); /* Match desktop sidebar padding offset */
  }

  .flare-sidebar a {
    display: block;
    padding: 0.4rem var(--flare-space-md); /* Add padding for clickable area */
    color: var(--flare-text-muted);
    text-decoration: none;
  }

  .flare-sidebar a:hover {
    color: var(--flare-text);
  }

  .flare-sidebar a.active {
    color: var(--flare-primary);
    font-weight: 600;
  }
  
  /* Code blocks */
  .flare-code,
  pre { 
    max-width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding: 0; 
  }

  .flare-code {
    background: var(--flare-surface-alt);
    padding: var(--flare-space-md);
    border-radius: var(--flare-radius-sm);
    border: 1px solid var(--flare-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    font-size: 0.95rem;
    overflow-x: auto; 
  }

  /* ==========================================================
     STANDARD COMPONENTS
     ========================================================== */
  
  /* Responsive, Styled Table (New component) */
  .flare-table {
    width: 100%;
    max-width: 100%; 
    margin: var(--flare-space-xl) 0;
    border-collapse: collapse;
    background: var(--flare-surface);
    border: 1px solid var(--flare-border);
    border-radius: var(--flare-radius-md);
    overflow: hidden; /* Contains the border-radius */
  }
  
  .flare-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--flare-space-xl) 0;
  }
  
  .flare-table th {
    text-align: left;
    padding: var(--flare-space-md);
    background: var(--flare-surface-alt);
    font-weight: 600;
    color: var(--flare-text);
    border-bottom: 2px solid var(--flare-border);
  }
  
  .flare-table td {
    padding: var(--flare-space-md);
    border-bottom: 1px solid var(--flare-border);
    color: var(--flare-text-muted);
  }


  /* Header & Nav */
  .flare-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--flare-surface);
    border-bottom: 1px solid var(--flare-border);
    height: var(--flare-nav-height);
    display: flex;
    align-items: center;
  }

  .flare-header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--flare-space-md);
  }
  
  /* Mobile padding adjustment (768px and below) */
  @media (max-width: 768px) {
    .flare-header-inner {
      padding: 0 var(--flare-space-sm);
    }
  }


  .flare-logo {
    font-weight: 700;
    color: var(--flare-primary);
    text-decoration: none;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: var(--flare-space-sm);
  }

  .flare-nav a {
    color: var(--flare-text-muted);
    text-decoration: none;
    margin-left: var(--flare-space-lg);
    font-weight: 500;
  }

  .flare-nav a:hover {
    color: var(--flare-text);
  }

  .flare-header-button {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--flare-text);
  }

  /* Cards */
  .flare-card {
    background: var(--flare-surface);
    border: 1px solid var(--flare-border);
    border-radius: var(--flare-radius-md);
    padding: var(--flare-space-lg);
    box-shadow: var(--flare-shadow-sm);
  }

  /* Buttons */
  .flare-btn {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: var(--flare-radius-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--flare-primary);
    color: #fff;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }

  .flare-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--flare-shadow-md);
    background: var(--flare-primary-600);
  }

  .flare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .flare-btn-outline {
    background: transparent;
    color: var(--flare-primary);
    border-color: var(--flare-primary);
  }

  .flare-btn-light {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
  }

  .flare-btn-light:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.8);
  }

  .flare-btn-block {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Form Elements */
  .flare-input,
  .flare-textarea,
  .flare-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--flare-border);
    border-radius: var(--flare-radius-sm);
    background: var(--flare-surface);
    color: var(--flare-text);
    line-height: 1.5;
    transition: border-color 0.15s ease;
  }

  .flare-input:focus,
  .flare-textarea:focus,
  .flare-select:focus {
    outline: none;
    border-color: var(--flare-primary);
  }

  /* Pricing */
  .flare-pricing {
    gap: var(--flare-space-lg);
  }

  .flare-pricing-card {
    border-radius: var(--flare-radius-md);
    padding: var(--flare-space-lg);
    border: 1px solid var(--flare-border);
    text-align: center;
  }

  .flare-pricing-card.flare-featured {
    border: 2px solid var(--flare-primary);
    box-shadow: var(--flare-shadow-md);
    transform: translateY(-4px);
  }

  .flare-pricing-price {
    font-size: 2rem;
    color: var(--flare-primary);
    margin: 0.5rem 0 1rem;
    font-weight: 700;
  }

  .flare-pricing-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    color: var(--flare-text-muted);
  }

  /* Hero */
  .flare-hero {
    background: linear-gradient(135deg, var(--flare-primary) 0%, var(--flare-secondary) 100%);
    color: #ffffff;
    padding: calc(var(--flare-space-xl) * 1.2) var(--flare-space-md);
    border-radius: 0 0 var(--flare-radius-lg) var(--flare-radius-lg);
    margin: auto;
    max-width: var(--flare-container-max); /* Constrain hero to container max width */
    text-align: center;
  }

  .flare-hero h1 {
    margin-top: .75em; /* override base margin */
    color: #ffffff; /* Override base text color */
  }

  .flare-hero p {
    color: rgba(255,255,255,0.95);
    max-width: var(--flare-max-w-sm);
    margin: 0 auto 1rem;
  }

  .flare-hero-logo {
    height: 160px;
    margin: auto;
    display: block;
  }

  /* Mobile Hero Adjustment (unified approach) */
  @media (max-width: 768px) {
    .flare-hero h1 {
      font-size: 1.75rem; /* Adjusted for smaller screens */
    }

    .flare-hero-logo {
      height: 125px;
    }
  }

  /* Footer */
  .flare-footer {
    background: var(--flare-surface-alt);
    border-top: 1px solid var(--flare-border);
    padding: var(--flare-space-lg) 0;
    color: var(--flare-text-muted);
  }

  .flare-footer .flare-container {
    display: flex;
    justify-content: space-between;
    gap: var(--flare-space-lg);
    align-items: center;
  }

  .flare-footer a {
    color: var(--flare-text-muted);
    text-decoration: none;
  }

  .flare-footer a:hover {
    color: var(--flare-text);
  }

  /* Divider */
  .flare-hr {
    border: none;
    border-top: 1px solid var(--flare-border);
    margin: var(--flare-space-lg) 0;
  }
  
  /* Figure/Media */
  .flare-figure {
    margin: 0 0 var(--flare-space-lg);
    display: block;
  }

  .flare-figcaption {
    color: var(--flare-text-muted);
    font-size: 0.9rem;
    margin-top: var(--flare-space-sm);
    text-align: center;
  }
}

/* ----------------------------
   Utilities Layer
   ---------------------------- */
@layer utilities {

  /* ==================================== */
  /* 1. Base Structural Utilities (Mobile-First) */
  /* ==================================== */

  /* Grid (Default is a 1-column stack) */
  .flare-grid {
    display: grid;
    gap: var(--flare-space-lg);
    grid-template-columns: 1fr;
  }

  /* Flex */
  .flare-flex { display: flex; }
  .flare-flex-row { flex-direction: row; }
  .flare-flex-col { flex-direction: column; }
  .flare-justify-start { justify-content: flex-start; }
  .flare-justify-end { justify-content: flex-end; }
  .flare-justify-center { justify-content: center; }
  .flare-justify-between { justify-content: space-between; }
  .flare-items-start { align-items: flex-start; }
  .flare-items-end { align-items: flex-end; }
  .flare-items-center { align-items: center; }
  .flare-spacer { flex: 1 1 auto; }
  
  /* SR Only (Accessibility) */
  .flare-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;
  }

  /* ==================================== */
  /* 2. Responsive Structural Variants */
  /* (Using min-width and defined breakpoints) */
  /* ==================================== */

  /* SM Breakpoint: min-width: 640px */
  @media (min-width: 640px) {
    .flare-sm\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flare-sm\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flare-sm\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flare-sm\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--flare-grid-min), 1fr)); }
    .flare-sm\:flex-row { flex-direction: row; }
    .flare-sm\:flex-col { flex-direction: column; }
  }

  /* MD Breakpoint: min-width: 768px */
  @media (min-width: 768px) {
    .flare-md\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flare-md\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flare-md\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flare-md\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--flare-grid-min), 1fr)); }
    .flare-md\:flex-row { flex-direction: row; }
    .flare-md\:flex-col { flex-direction: column; }
  }

  /* LG Breakpoint: min-width: 1024px */
  @media (min-width: 1024px) {
    .flare-lg\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flare-lg\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flare-lg\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flare-lg\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--flare-grid-min), 1fr)); }
    .flare-lg\:flex-row { flex-direction: row; }
    .flare-lg\:flex-col { flex-direction: column; }
  }
  
  /* ==================================== */
  /* 3. Non-Structural Utilities */
  /* ==================================== */

  /* Text Color Utilities */
  .flare-text-primary { color: var(--flare-primary) !important; }
  .flare-text-muted { color: var(--flare-text-muted) !important; }
  .flare-text-success { color: var(--flare-success) !important; }
  .flare-text-error { color: var(--flare-error) !important; }

  /* Gap utilities - t-shirt sized */
  .flare-gap-xs { gap: var(--flare-space-xs); }
  .flare-gap-sm { gap: var(--flare-space-sm); }
  .flare-gap-md { gap: var(--flare-space-md); }
  .flare-gap-lg { gap: var(--flare-space-lg); }
  .flare-gap-xl { gap: var(--flare-space-xl); }

  /* Centering utilities */
  .flare-center { margin-left: auto; margin-right: auto; }
  .flare-center-flex { display: flex; justify-content: center; align-items: center; }
  .flare-text-center { text-align: center; }
  .flare-mx-auto { margin-left: auto; margin-right: auto; }

  /* Max-width utilities */
  .flare-max-w-xs { max-width: var(--flare-max-w-xs); }
  .flare-max-w-sm { max-width: var(--flare-max-w-sm); }
  .flare-max-w-md { max-width: var(--flare-max-w-md); }
  .flare-max-w-lg { max-width: var(--flare-max-w-lg); }
  .flare-max-w-xl { max-width: var(--flare-max-w-xl); }

  /* Spacing utilities - t-shirt sized (ALL !important) */
  .flare-m-0 { margin: 0 !important; }
  .flare-m-xs { margin: var(--flare-space-xs) !important; }
  .flare-m-sm { margin: var(--flare-space-sm) !important; }
  .flare-m-md { margin: var(--flare-space-md) !important; }
  .flare-m-lg { margin: var(--flare-space-lg) !important; }
  .flare-m-xl { margin: var(--flare-space-xl) !important; }
  .flare-mt-xs { margin-top: var(--flare-space-xs) !important; }
  .flare-mt-sm { margin-top: var(--flare-space-sm) !important; }
  .flare-mt-md { margin-top: var(--flare-space-md) !important; }
  .flare-mt-lg { margin-top: var(--flare-space-lg) !important; }
  .flare-mt-xl { margin-top: var(--flare-space-xl) !important; }
  .flare-mb-xs { margin-bottom: var(--flare-space-xs) !important; }
  .flare-mb-sm { margin-bottom: var(--flare-space-sm) !important; }
  .flare-mb-md { margin-bottom: var(--flare-space-md) !important; }
  .flare-mb-lg { margin-bottom: var(--flare-space-lg) !important; }
  .flare-mb-xl { margin-bottom: var(--flare-space-xl) !important; }
  .flare-mx-xs { margin-left: var(--flare-space-xs) !important; margin-right: var(--flare-space-xs) !important; }
  .flare-mx-sm { margin-left: var(--flare-space-sm) !important; margin-right: var(--flare-space-sm) !important; }
  .flare-mx-md { margin-left: var(--flare-space-md) !important; margin-right: var(--flare-space-md) !important; }
  .flare-mx-lg { margin-left: var(--flare-space-lg) !important; margin-right: var(--flare-space-lg) !important; }
  .flare-mx-xl { margin-left: var(--flare-space-xl) !important; margin-right: var(--flare-space-xl) !important; }
  .flare-my-xs { margin-top: var(--flare-space-xs) !important; margin-bottom: var(--flare-space-xs) !important; }
  .flare-my-sm { margin-top: var(--flare-space-sm) !important; margin-bottom: var(--flare-space-sm) !important; }
  .flare-my-md { margin-top: var(--flare-space-md) !important; margin-bottom: var(--flare-space-md) !important; }
  .flare-my-lg { margin-top: var(--flare-space-lg) !important; margin-bottom: var(--flare-space-lg) !important; }
  .flare-my-xl { margin-top: var(--flare-space-xl) !important; margin-bottom: var(--flare-space-xl) !important; }
  .flare-p-xs { padding: var(--flare-space-xs) !important; }
  .flare-p-sm { padding: var(--flare-space-sm) !important; }
  .flare-p-md { padding: var(--flare-space-md) !important; }
  .flare-p-lg { padding: var(--flare-space-lg) !important; }
  .flare-p-xl { padding: var(--flare-space-xl) !important; }
  .flare-pt-xs { padding-top: var(--flare-space-xs) !important; }
  .flare-pt-sm { padding-top: var(--flare-space-sm) !important; }
  .flare-pt-md { padding-top: var(--flare-space-md) !important; }
  .flare-pt-lg { padding-top: var(--flare-space-lg) !important; }
  .flare-pt-xl { padding-top: var(--flare-space-xl) !important; }
  .flare-pb-xs { padding-bottom: var(--flare-space-xs) !important; }
  .flare-pb-sm { padding-bottom: var(--flare-space-sm) !important; }
  .flare-pb-md { padding-bottom: var(--flare-space-md) !important; }
  .flare-pb-lg { padding-bottom: var(--flare-space-lg) !important; }
  .flare-pb-xl { padding-bottom: var(--flare-space-xl) !important; }
  .flare-px-xs { padding-left: var(--flare-space-xs) !important; padding-right: var(--flare-space-xs) !important; }
  .flare-px-sm { padding-left: var(--flare-space-sm) !important; padding-right: var(--flare-space-sm) !important; }
  .flare-px-md { padding-left: var(--flare-space-md) !important; padding-right: var(--flare-space-md) !important; }
  .flare-px-lg { padding-left: var(--flare-space-lg) !important; padding-right: var(--flare-space-lg) !important; }
  .flare-px-xl { padding-left: var(--flare-space-xl) !important; padding-right: var(--flare-space-xl) !important; }
  .flare-py-xs { padding-top: var(--flare-space-xs) !important; padding-bottom: var(--flare-space-xs) !important; }
  .flare-py-sm { padding-top: var(--flare-space-sm) !important; padding-bottom: var(--flare-space-sm) !important; }
  .flare-py-md { padding-top: var(--flare-space-md) !important; padding-bottom: var(--flare-space-md) !important; }
  .flare-py-lg { padding-top: var(--flare-space-lg) !important; padding-bottom: var(--flare-space-lg) !important; }
  .flare-py-xl { padding-top: var(--flare-space-xl) !important; padding-bottom: var(--flare-space-xl) !important; }
}

/* --- FIX: PrismJS Toolbar Styling --- */

/* 1. Set the outer wrapper to relative positioning (for button float) */
div.code-toolbar {
    position: relative;
    margin: var(--flare-space-xl) 0; 
}

/* 2. Style the toolbar div to float absolutely at the top-right */
div.code-toolbar > .toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: var(--flare-space-sm); 
    background: rgba(40, 44, 52, 0.7); 
    border-radius: 0 0 0 var(--flare-radius-sm);
}

/* 3. fix button styling */
div.code-toolbar > .toolbar button {
    background: #4b5563;
    color: #fff;
    border: none;
    padding: var(--flare-space-xs) var(--flare-space-md);
    border-radius: var(--flare-radius-sm);
    cursor: pointer;
}

div.code-toolbar > .toolbar button:hover {
    background: #374151;
}

/* end of file */