@import 'tailwindcss';

/* =========================
   GLOBAL BASE STYLES
========================= */

html {
  scroll-padding-top: var(--header-height);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: theme('fontFamily.sans');
  overflow-x: hidden;
}

/* =========================
   THEME VARIABLES (DARK DEFAULT)
========================= */

:root {
  --header-height: 75px;
  --footer-height: 70px;

  --bg-primary: #000000;
  --bg-secondary: oklch(27.4% 0.006 286.033);

  --text-primary: #ffffff;

  --accent: #00d4ff;
  --accent2: #7b2ff7;

  --muted-color: #ffffff33;

  --color-base: #000000;
  --color-inverse: #ffffff;

  --transition-fast: 200ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* =========================
   LIGHT MODE OVERRIDE
========================= */

.light-mode {
  --bg-primary: #e0e0e0;
  --bg-secondary: oklch(96.7% 0.001 286.375);

  --text-primary: #111111;

  --accent: #0077ff;

  --muted-color: #ffffff33;

  --color-base: #ffffff;
  --color-inverse: #000000;
}

/* =========================
   UTILITY CLASSES (USE THESE INSTEAD OF bg-black etc)
========================= */

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

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

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

.bg-accent2 {
  background: var(--accent2);
}

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

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

.text-muted {
  color: var(--muted-color);
}

.border-muted {
  border-color: var(--muted-color);
}

.transition-fast {
  transition: all var(--transition-fast);
}

/* =========================
   TRANSITIONS
========================= */

@layer utilities {
  .transition-theme {
    transition:
      color 500ms ease,
      background-color 500ms ease,
      border-color 500ms ease;
  }
}

/* =========================
   LOGO
========================= */

.bg-logo-light {
  background: var(--color-base);
}

.bg-logo-dark {
  background: var(--color-inverse);
}

.text-logo-light {
  color: var(--color-base);
}

.text-logo-dark {
  color: var(--color-inverse);
}

/* =========================
   SCROLLBAR (OPTIONAL NICE TOUCH)
========================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0099cc;
}