@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Mobile-friendly table styles */
@layer components {
  .table-wrapper {
    @apply overflow-x-auto -mx-4 px-4;
  }
  
  table {
    @apply min-w-full;
  }
  
  @media (max-width: 640px) {
    table {
      @apply text-sm;
    }
    
    th, td {
      @apply px-2 py-1;
    }
  }
}

  /* Syntax highlighting styles */
  .code-block {
    position: relative;
    background-color: rgb(17 24 39);
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  .code-block pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }
  
  .code-block code {
    display: block;
    font-size: 0.875rem;
    line-height: 1.625;
  }
  
  .code-lines {
    display: flex;
  }
  
  .line-numbers {
    user-select: none;
    color: rgb(107 114 128);
    text-align: right;
    padding: 1rem 1rem 1rem 0;
    background-color: rgb(31 41 55);
    min-width: 3rem;
  }
  
  .line-number {
    display: block;
    font-size: 0.75rem;
    line-height: 1.625;
  }
  
  .code-content {
    flex: 1;
    padding: 1rem;
    overflow-x: auto;
  }
  
  /* Syntax highlighting colors */
  .token-comment {
    color: rgb(107 114 128);
    font-style: italic;
  }
  
  .token-tag {
    color: rgb(236 72 153);
  }
  
  .token-attr {
    color: rgb(74 222 128);
  }
  
  .token-string {
    color: rgb(253 224 71);
  }
  
  .token-keyword {
    color: rgb(192 132 252);
  }
  
  .token-function {
    color: rgb(96 165 250);
  }
  
  .token-variable {
    color: rgb(251 146 60);
  }
  
  .token-punctuation {
    color: rgb(156 163 175);
  }

  @font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/4f2204fa15b9b11a-s.woff2) format("woff2");
    unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff
  }
  @font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/07a54048a9278940-s.p.woff2) format("woff2");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd
  }