/* Lato Fonts */
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Thin-e2ee3da03b502befab1ac02325ff50f6b762cc257465a9618bde891ad80c949b.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-ThinItalic-e1c138f2e858ada537a804b7add3328e46e7c819f8c1d61e86c7b921ad15a66e.ttf) format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Light-beda23b23dfd435f2e5a2e1c6d19457b2130f31777f6f587567fdcb93bbde4a5.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-LightItalic-09058a33202762b9e22af65faf6ba283f45575dcc90f6602f46ffff90ce15b24.ttf) format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Regular-5a7ee76932e5355f679f70b3c2380533564dd25143a8eab609ab74743acbed70.ttf) format('truetype');
  font-weight: 400; /* normal */
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Italic-8843554b577e598badb5fcda60c64ab89fcefc20b556c8e8ffe52edcb1cafc0c.ttf) format('truetype');
  font-weight: 400; /* normal */
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Bold-ede7eb46edd69275f376a6ba6882afc55e52c49df5e6e306e55698d516456c02.ttf) format('truetype');
  font-weight: 700; /* bold */
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-BoldItalic-ac2c5cff120da5d323b3f30dfc9d29dd11582804d97b5a6c9424bf9e761e56de.ttf) format('truetype');
  font-weight: 700; /* bold */
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-Black-83b7920dd041f1e8fc0e26208d74574641530e7e612887f8de33bf68802630b4.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url(/assets/Lato-BlackItalic-b37b178bb35ef2527d72cf0435e77a68fc0c396bb039b2959b7d066047bd72a8.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* Satoshi Variable Fonts */
@font-face {
  font-family: 'Satoshi';
  src: url(/assets/Satoshi-Variable-8a5189ce5eadbc6accc3db5eeb89e3cc075cade6b76bbecb176617e9026e6624.ttf) format('truetype-variations');
  font-weight: 100 900; /* Full range for variable font */
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url(/assets/Satoshi-VariableItalic-9c09c8ecb65629906606f48a100885ec5af58757b821bd113709de2c26918a9c.ttf) format('truetype-variations');
  font-weight: 100 900; /* Full range for variable font */
  font-style: italic;
}

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

@layer base {
  body {
    @apply font-sans; /* Default to Satoshi */
  }
  p {
    @apply font-lato; /* Apply Lato to <p> elements */
  }
}

@layer components {
  .btn-primary {
    @apply flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer;
  }

  .btn-black {
    @apply btn-primary bg-primary hover:bg-primary/90 focus-visible:outline-primary;
  }

  .btn-success {
    @apply btn-primary bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary;
  }
  
  .btn-secondary {
    @apply btn-primary bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary;
  }

  .btn-error {
    @apply btn-primary bg-error hover:bg-error-light focus-visible:outline-error;
  }

  .btn-warning {
    @apply btn-primary bg-warning hover:bg-warning-light focus-visible:outline-warning;
  }
  
  .heading-hero {
    @apply text-5xl sm:text-6xl lg:text-7xl;
  }
}
/* Custom scrollbar styling for audit log */
.audit-log-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.audit-log-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.audit-log-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.audit-log-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* For Firefox */
.audit-log-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f1f1f1;
}
/* REPL specific styles */
.repl-container {
  font-family: monospace;
}

.repl-code-area {
  font-family: monospace;
  background-color: #282c34;
  color: #abb2bf;
  border: 1px solid #4b5263;
  border-radius: 4px;
  padding: 10px;
  resize: vertical;
}

.repl-output {
  font-family: monospace;
  background-color: #282c34;
  color: #abb2bf;
  border: 1px solid #4b5263;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 500px;
  overflow-y: auto;
}

.repl-execute-btn {
  background-color: #61afef;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.repl-execute-btn:hover {
  background-color: #528bff;
}

.repl-warning {
  color: #e06c75;
  font-weight: bold;
  margin-bottom: 15px;
}

.repl-example {
  background-color: #3e4451;
  color: #abb2bf;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */