:root,
:root[data-theme='light'] {
  --color-bg: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
  --color-fg: #18181b;
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-accent: #e11d48;
  --color-fuchsia: #d946ef;
  --color-violet: #8b5cf6;
}

:root[data-theme='dark'] {
  --color-bg: linear-gradient(135deg, #bfa181 0%, #23272f 100%);
  --color-fg: #f3f4f6;
  --color-primary: #a78bfa;
  --color-secondary: #52525b;
  --color-accent: #f472b6;
  --color-fuchsia: #a21caf;
  --color-violet: #6d28d9;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .default-btn {
        @apply bg-transparent text-gray-500 font-semibold rounded-xl uppercase text-sm py-1 px-3 border-gray-400 outline-none border hover:outline-none hover:shadow-lg hover:shadow-gray-700 transition-all duration-300;
    }
}
@font-face {
  font-family: 'Inter var';
  src: url(/assets/inter/Inter-roman.var.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/*
 * 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.
 *



 */

html,
body {
  background-color: transparent !important;
  background-image: var(--color-bg) !important;
}

.text-fg {
  color: var(--color-fg) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-fuchsia {
  color: var(--color-fuchsia) !important;
}

.text-violet {
  color: var(--color-violet) !important;
}

.bg-primary {
  background: var(--color-primary) !important;
}

.bg-secondary {
  background: var(--color-secondary) !important;
}

.bg-accent {
  background: var(--color-accent) !important;
}

.bg-fuchsia {
  background: var(--color-fuchsia) !important;
}

.bg-violet {
  background: var(--color-violet) !important;
}