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

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

/* SUISSE THEME — DARK STYLE USED FOR BOTH MODES
   You said dark mode looks perfect, so light mode now uses
   EXACTLY the same colors and variables.
*/

/* ---------- ROOT (LIGHT MODE, SAME AS DARK) ---------- */
:root {
  --background: #3b101a;
  --foreground: #fdf7f8;

  --card: #7f4354;
  --card-foreground: #ffffff;

  --primary: #b68f99;
  --primary-foreground: #ffffff;

  --secondary: #551525;
  --secondary-foreground: #ffffff;

  --muted: #4b1823;
  --muted-foreground: #f1dde2;

  --popover: #7f4354;
  --popover-foreground: #ffffff;

  --accent: #c8a5ae;
  --accent-foreground: #ffffff;

  --destructive: #b72929;
  --destructive-foreground: #ffffff;

  --success: #1aa763;
  --success-foreground: #ffffff;

  --border: #5a1b29;
  --input: #5a1b29;
  --ring: var(--primary);

  --panel-background: #7f4354;
  --panel-foreground: #ffffff;
  --panel-primary: var(--primary);
  --panel-primary-foreground: var(--primary-foreground);
  --panel-accent: #6c2135;
  --panel-accent-foreground: #ffffff;
  --panel-border: #5a1b29;
  --panel-ring: var(--ring);

  --dropdown-background: #3b101a;
  --dropdown-foreground: #fdf7f8;

  --nav-hover: #4b1823;
}

/* ---------- DARK MODE (IDENTICAL PALETTE) ---------- */
.dark {
  --background: #3b101a;
  --foreground: #fdf7f8;

  --card: #7f4354;
  --card-foreground: #ffffff;

  --primary: #b68f99;
  --primary-foreground: #ffffff;

  --secondary: #551525;
  --secondary-foreground: #ffffff;

  --muted: #4b1823;
  --muted-foreground: #f1dde2;

  --popover: #7f4354;
  --popover-foreground: #ffffff;

  --accent: #c8a5ae;
  --accent-foreground: #ffffff;

  --destructive: #b72929;
  --destructive-foreground: #ffffff;

  --success: #1aa763;
  --success-foreground: #ffffff;

  --border: #5a1b29;
  --input: #5a1b29;
  --ring: var(--primary);

  --panel-background: #7f4354;
  --panel-foreground: #ffffff;
  --panel-primary: var(--primary);
  --panel-primary-foreground: var(--primary-foreground);
  --panel-accent: #6c2135;
  --panel-accent-foreground: #ffffff;
  --panel-border: #5a1b29;
  --panel-ring: var(--ring);

  --dropdown-background: #3b101a;
  --dropdown-foreground: #fdf7f8;

  --nav-hover: #4b1823;
}

/* ---------- THEME MAPPING ---------- */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-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-primary: var(--panel-primary);
  --color-panel-primary-foreground: var(--panel-primary-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);
}

/* ---------- BUTTON HOVER ---------- */
button:hover,
.btn:hover,
.btn-primary:hover,
.button:hover,
a.button:hover {
  background-color: #cc0000 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ---------- ACTIVE / SELECTED BUTTONS & TABS ---------- */
button:active,
button[aria-pressed="true"],
button[aria-current="page"],
.btn:active,
.btn[aria-pressed="true"],
.btn[aria-current="page"],
a.button:active,
a.button[aria-pressed="true"],
a.button[aria-current="page"],
[role="tab"][aria-selected="true"],
[role="button"][aria-pressed="true"],
nav .active,
nav a.active,
nav a[aria-current="page"],
header .active,
header a[aria-current="page"],
main .active {
  background-color: #7f4354 !important; /* same as card */
  color: #ffffff !important;
}

/* ---------- ACTIVE SIDEBAR TAB ---------- */
nav .active,
.sidebar .active,
.settings-menu .active,
[aria-current="page"] {
  background-color: #7f4354 !important;
  color: #ffffff !important;
}

nav .active *,
.sidebar .active *,
.settings-menu .active * {
  color: #ffffff !important;
}