@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/* =========================
   SAVA FINAL THEME (COMPLETE)
   ========================= */

:root {
  --background: #0f2a3a;
  --foreground: #ffffff;

  --card: #1e78a8;
  --card-foreground: #ffffff;

  --primary: #1e78a8;
  --primary-foreground: #ffffff;

  --secondary: #0f2a3a;
  --secondary-foreground: #ffffff;

  --accent: #f2c200;
  --accent-foreground: #000000;

  --muted: #162f3f;
  --muted-foreground: #cccccc;

  --destructive: #ff4d4d;
  --destructive-foreground: #ffffff;

  --success: #007A4D;
  --success-foreground: #ffffff;

  /* GOLD BORDERS (IMPORTANT) */
  --border: #f2c200;
  --input: #1e78a8;
  --ring: #f2c200;

  --panel-background: #1e78a8;
  --panel-foreground: #ffffff;
  --panel-primary: #1e78a8;
  --panel-primary-foreground: #ffffff;
  --panel-accent: #f2c200;
  --panel-accent-foreground: #000000;
  --panel-border: #f2c200;
  --panel-ring: #f2c200;

  --dropdown-background: #1e78a8;
  --dropdown-foreground: #ffffff;

  --nav-hover: #f2c200;
}

.dark {
  --background: #0f2a3a;
  --foreground: #ffffff;

  --card: #1e78a8;
  --card-foreground: #ffffff;

  --primary: #1e78a8;
  --primary-foreground: #ffffff;

  --secondary: #0f2a3a;
  --secondary-foreground: #ffffff;

  --accent: #f2c200;
  --accent-foreground: #000000;

  --muted: #162f3f;
  --muted-foreground: #cccccc;

  --border: #f2c200;
  --input: #1e78a8;
  --ring: #f2c200;

  --panel-background: #1e78a8;
  --panel-foreground: #ffffff;
}

/* REQUIRED THEME MAPPING */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-panel: var(--panel-background);
  --color-panel-foreground: var(--panel-foreground);
  --color-panel-accent: var(--panel-accent);
  --color-panel-accent-foreground: var(--panel-accent-foreground);
  --color-panel-border: var(--panel-border);
  --color-panel-ring: var(--panel-ring);
  --color-dropdown: var(--dropdown-background);
  --color-dropdown-foreground: var(--dropdown-foreground);
  --color-nav-hover: var(--nav-hover);
}

/* =========================
   GOLD HOVER EFFECTS
   ========================= */

* {
  transition: all 0.25s ease;
}

/* CARD HOVER */
.card, [class*="card"], [class*="panel"] {
  position: relative;
  overflow: hidden;
}

.card:hover, [class*="card"]:hover, [class*="panel"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #f2c200, 0 8px 20px rgba(242, 194, 0, 0.25);
}

/* GOLD TOP LINE ANIMATION */
.card::before, [class*="panel"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #f2c200, #ffd84d);
  transition: width 0.3s ease;
}

.card:hover::before, [class*="panel"]:hover::before {
  width: 100%;
}

/* BUTTON HOVER */
button:hover, .btn:hover {
  box-shadow: 0 0 10px rgba(242, 194, 0, 0.6);
}

/* LINKS */
a:hover {
  color: #f2c200 !important;
  text-shadow: 0 0 6px rgba(242, 194, 0, 0.6);
}