@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    @apply transition-colors duration-300;
  }
  body {
    @apply font-['Raleway'] bg-white text-black;
  }
  .dark body {
    @apply bg-[#111111] text-white;
  }

  .prose {
    p, strong, li, h1, h2, h3, h4, h5, h6, a {
      @apply text-black;
    }
  }

  .dark .prose {
    p, strong, li, h1, h2, h3, h4, h5, h6, a, table, th, td, thead, tbody, tfoot {
      @apply text-white;
    }
    
    table {
      @apply border-gray-600;
    }
    
    th, td {
      @apply border-gray-600;
    }
    
    thead {
      @apply border-gray-600;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-['Fuzzy_Bubbles'];
  }

  /* Code block styling */
  pre {
    @apply rounded-lg border border-gray-200 p-4 overflow-x-auto;
  }
  
  .dark pre {
    @apply border-gray-700;
  }
  
  code {
    @apply font-mono text-sm;
  }
  
  pre code {
    @apply bg-transparent border-0 p-0;
  }

  /* Rouge syntax highlighting - Improved light theme */
  .highlight table td { padding: 5px; }
  .highlight table pre { margin: 0; }
  .highlight {
    color: #1f2937;
    background-color: #f8fafc;
  }
  
  .highlight .w {
    color: #1f2937;
    background: transparent;
  }
  
  /* Keywords (def, class, if, etc.) */
  .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
    color: #c53030;
    font-weight: 600;
  }
  
  /* Strings */
  .highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
    color: #047857;
    font-weight: 500;
  }
  
  /* Numbers */
  .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
    color: #1d4ed8;
    font-weight: 500;
  }
  
  /* Function names */
  .highlight .nf, .highlight .fm {
    color: #7c2d12;
    font-weight: 600;
  }
  
  /* Class names */
  .highlight .nc {
    color: #b45309;
    font-weight: 600;
  }
  
  /* Comments */
  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
    color: #6b7280;
    font-style: italic;
  }
  
  /* Operators */
  .highlight .o, .highlight .ow {
    color: #dc2626;
    font-weight: 500;
  }
  
  /* Variables */
  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
    color: #1e40af;
  }
  
  /* Attributes/Properties */
  .highlight .na {
    color: #059669;
    font-weight: 500;
  }
  
  /* Built-ins */
  .highlight .nb, .highlight .bp {
    color: #7c3aed;
    font-weight: 500;
  }
  
  /* Constants */
  .highlight .kc, .highlight .no {
    color: #db2777;
    font-weight: 600;
  }
  
  /* Decorators */
  .highlight .nd {
    color: #9333ea;
    font-weight: 500;
  }
  
  /* Tags */
  .highlight .nt {
    color: #dc2626;
    font-weight: 600;
  }
  
  /* Symbols */
  .highlight .sr, .highlight .ss {
    color: #0891b2;
    font-weight: 500;
  }
  
  /* Modules/Namespaces */
  .highlight .nn {
    color: #b45309;
    font-weight: 600;
  }
  
  /* Errors */
  .highlight .err {
    color: #ffffff;
    background-color: #dc2626;
    padding: 1px 2px;
    border-radius: 2px;
  }
  
  /* Diffs */
  .highlight .gd {
    color: #991b1b;
    background-color: #fef2f2;
  }
  .highlight .gi {
    color: #166534;
    background-color: #f0fdf4;
  }
  
  /* Headers */
  .highlight .gh, .highlight .gu {
    color: #374151;
    font-weight: bold;
  }
  
  /* Other elements */
  .highlight .gr, .highlight .gl, .highlight .gt {
    color: #6b7280;
  }
  .highlight .ni, .highlight .si {
    color: #1f2937;
  }
  .highlight .ge {
    color: #1f2937;
    font-style: italic;
  }
  .highlight .gs {
    color: #1f2937;
    font-weight: bold;
  }
  .highlight .ges {
    font-weight: bold;
    font-style: italic;
  }
  .highlight .ne, .highlight .py {
    color: #1d4ed8;
  }
  
  /* Additional classes for JSON and other formats */
  .highlight .p {
    color: #1f2937;
    font-weight: 500;
    background: transparent;
  }
  
  .highlight .w {
    color: #1f2937;
    background: transparent;
  }
  
  /* JSON property names should be more distinct */
  .highlight .nl {
    color: #1d4ed8;
    font-weight: 600;
    background: transparent;
  }

  /* Rouge syntax highlighting - Dark theme */
  .dark .highlight, .dark .highlight .w {
    color: #f8f8f2;
    background-color: #272822;
  }
  .dark .highlight .err {
    color: #960050;
    background-color: #1e0010;
  }
  .dark .highlight .c, .dark .highlight .ch, .dark .highlight .cd, .dark .highlight .cm, .dark .highlight .cp, .dark .highlight .cpf, .dark .highlight .c1, .dark .highlight .cs {
    color: #75715e;
  }
  .dark .highlight .k, .dark .highlight .kc, .dark .highlight .kd, .dark .highlight .kn, .dark .highlight .kp, .dark .highlight .kr, .dark .highlight .kt {
    color: #66d9ef;
  }
  .dark .highlight .kv {
    color: #66d9ef;
  }
  .dark .highlight .l, .dark .highlight .ld {
    color: #ae81ff;
  }
  .dark .highlight .m, .dark .highlight .mb, .dark .highlight .mf, .dark .highlight .mh, .dark .highlight .mi, .dark .highlight .il, .dark .highlight .mo, .dark .highlight .mx {
    color: #ae81ff;
  }
  .dark .highlight .s, .dark .highlight .sa, .dark .highlight .sb, .dark .highlight .sc, .dark .highlight .dl, .dark .highlight .sd, .dark .highlight .s2, .dark .highlight .se, .dark .highlight .sh, .dark .highlight .si, .dark .highlight .sx, .dark .highlight .sr, .dark .highlight .s1, .dark .highlight .ss {
    color: #e6db74;
  }
  .dark .highlight .na {
    color: #a6e22e;
  }
  .dark .highlight .nb {
    color: #f8f8f2;
  }
  .dark .highlight .bp {
    color: #f8f8f2;
  }
  .dark .highlight .nc {
    color: #a6e22e;
  }
  .dark .highlight .no {
    color: #66d9ef;
  }
  .dark .highlight .nd {
    color: #a6e22e;
  }
  .dark .highlight .ni {
    color: #f8f8f2;
  }
  .dark .highlight .ne {
    color: #a6e22e;
  }
  .dark .highlight .nf, .dark .highlight .fm {
    color: #a6e22e;
  }
  .dark .highlight .nl {
    color: #f8f8f2;
  }
  .dark .highlight .nn {
    color: #f8f8f2;
  }
  .dark .highlight .nx {
    color: #a6e22e;
  }
  .dark .highlight .py {
    color: #f8f8f2;
  }
  .dark .highlight .nt {
    color: #f92672;
  }
  .dark .highlight .nv, .dark .highlight .vc, .dark .highlight .vg, .dark .highlight .vi, .dark .highlight .vm {
    color: #f8f8f2;
  }
  .dark .highlight .o, .dark .highlight .ow {
    color: #f92672;
  }
  .dark .highlight .gh {
    color: #f8f8f2;
    font-weight: bold;
  }
  .dark .highlight .gu {
    color: #75715e;
    font-weight: bold;
  }
  .dark .highlight .gd {
    color: #f92672;
  }
  .dark .highlight .gi {
    color: #a6e22e;
  }
  .dark .highlight .gs {
    font-weight: bold;
  }
  .dark .highlight .ge {
    font-style: italic;
  }
  .dark .highlight .gl {
    color: #f8f8f2;
    background-color: #49483e;
  }
  .dark .highlight .gt {
    color: #f92672;
  }
  
  /* Additional classes for JSON and other formats - Dark theme */
  .dark .highlight .p {
    color: #f8f8f2;
  }
  
  /* JSON property names in dark theme */
  .dark .highlight .nl {
    color: #79c0ff;
    font-weight: 600;
  }
  
  /* Inline code styling */
  p code, li code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
  }
  
  .dark p code, .dark li code {
    @apply bg-gray-800;
  }

  /* Hide dark theme styles by default */
  .hljs {
    background: #f6f8fa !important;
    color: #24292e !important;
  }
  
  /* Show dark theme styles when in dark mode */
  .dark .hljs {
    background: #0d1117 !important;
    color: #e6edf3 !important;
  }
  
  /* Ensure proper contrast for syntax highlighting in dark mode */
  .dark .hljs-keyword,
  .dark .hljs-selector-tag,
  .dark .hljs-subst {
    color: #ff7b72 !important;
  }
  
  .dark .hljs-string,
  .dark .hljs-doctag {
    color: #a5d6ff !important;
  }
  
  .dark .hljs-title,
  .dark .hljs-section,
  .dark .hljs-type,
  .dark .hljs-tag {
    color: #79c0ff !important;
  }
  
  .dark .hljs-variable,
  .dark .hljs-template-variable,
  .dark .hljs-attr {
    color: #ffa657 !important;
  }
  
  .dark .hljs-comment,
  .dark .hljs-quote {
    color: #8b949e !important;
  }
  
  .dark .hljs-number,
  .dark .hljs-literal {
    color: #79c0ff !important;
  }

  .quiz-wrapper {
    font-family: "Open Sans", sans-serif;

    .quizz-introduction {
      h2 {
        @apply text-black;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
      }
    }
  }
}

@layer components {
  .excalidraw-style {
    @apply border-2 border-black shadow-[2px_2px_0_#000000] bg-white transition-transform duration-200;
  }
  .excalidraw-style:hover {
    @apply -translate-y-0.5 -rotate-[0.5deg];
  }
  .dark .excalidraw-style {
    @apply border-white shadow-[2px_2px_0_#ffffff] bg-[#111111] text-white;
  }
  .excalidraw-button {
    @apply border-2 border-black shadow-[2px_2px_0_#000000] bg-[repeating-linear-gradient(135deg,#f1f5f9,#f1f5f9_2px,transparent_2px,transparent_4px)] inline-flex items-center justify-center gap-2 whitespace-nowrap transition-transform duration-200;
  }
  .excalidraw-button:hover {
    @apply -translate-y-0.5;
  }
  .dark .excalidraw-button {
    @apply bg-[repeating-linear-gradient(135deg,#272a2d,#272a2d_2px,transparent_2px,transparent_4px)] text-white;
  }
  .article-divider {
    @apply border-b-2 border-black;
  }
  .dark .article-divider {
    @apply border-white;
  }
  .excalidraw-background {
    @apply bg-[repeating-linear-gradient(135deg,#e9ecef,#e9ecef_1px,transparent_2px,transparent_4px)];
  }
  .dark .excalidraw-background {
    @apply bg-[repeating-linear-gradient(135deg,#272a2d,#272a2d_1px,transparent_2px,transparent_4px)];
  }

  .excalidraw-background-blue {
    font-weight: 600;
    @apply bg-[repeating-linear-gradient(135deg,#9edee6,#9edee6_1px,transparent_2px,transparent_4px)];
  }
}