/* =========================================
   FONT FACE
========================================= */

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins/Poppins-Regular.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins/Poppins-Medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins/Poppins-SemiBold.ttf") format("ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins/Poppins-Bold.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins/Poppins-ExtraBold.ttf") format("ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 🎨 IDENTIDADE (LOGO) */
  --color-primary: #0BC28C;
  --color-primary-dark: #09BD95;
  --color-secondary: #1EDD7F;
  --color-accent: #15D383;

  /* 🧱 BASE (LIGHT DEFAULT) */
  --color-bg: #f4f7fb;
  /* fundo geral escuro (mantém vibe atual) */
  --color-page: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fafb;

  --color-text: #111827;
  --color-muted: #6b7280;

  --color-border-light: #e5e7eb;
  --color-border: rgba(255, 255, 255, 0.18);

  /* 📐 TOKENS */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.35);

  --font-main: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* SIDEBAR - LIGHT */
  --sidebar-bg: #ffffff;
  --sidebar-text: #111827;
  --sidebar-muted: #64748b;
  --sidebar-border: rgba(15, 23, 42, 0.08);
  --sidebar-link: #475569;
  --sidebar-link-hover: #0f172a;
  --sidebar-active-bg: rgba(11, 194, 140, 0.10);
  --sidebar-active-border: rgba(11, 194, 140, 0.28);

  /* 🧩 COMPATIBILIDADE / TOKENS AUXILIARES */
  --color-surface-muted: #eef2f7;
  --color-text-muted: var(--color-muted);
  --color-text-inverse: #ffffff;

  --text-muted: var(--color-muted);
  --border-color: var(--color-border-light);
  --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.18);

}

html.theme-light,
body.theme-light {
  --color-bg: #f4f7fb;
  --color-page: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fafb;

  --color-text: #111827;
  --color-muted: #6b7280;

  --color-border-light: #e5e7eb;
}

/* 🌙 DARK MODE */
html.theme-dark,
body.theme-dark {
  --color-bg: #080914;
  --color-page: #080914;
  --color-surface: #101827;
  --color-surface-soft: #151f32;

  --color-text: #f9fafb;
  --color-muted: #9ca3af;

  --color-border-light: rgba(255, 255, 255, 0.10);

  /* SIDEBAR - DARK */
  --sidebar-bg: #080914;
  --sidebar-text: #ffffff;
  --sidebar-muted: rgba(255, 255, 255, .58);
  --sidebar-border: rgba(255, 255, 255, 0.10);
  --sidebar-link: rgba(255, 255, 255, .72);
  --sidebar-link-hover: #ffffff;
  --sidebar-active-bg: rgba(11, 194, 140, 0.16);
  --sidebar-active-border: rgba(11, 194, 140, 0.28);

  --color-surface-muted: #1f2937;
  --color-text-muted: var(--color-muted);
  --color-text-inverse: #ffffff;

  --text-muted: var(--color-muted);
  --border-color: var(--color-border-light);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.35);
}

/* RESET */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

input,
textarea,
select {
  font-size: 16px;
}

/* =========================================
   SCROLLBAR
========================================= */

/* CHROME / EDGE / SAFARI */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background:
    color-mix(in srgb,
      var(--color-surface) 92%,
      transparent);

  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;

  border: 2px solid transparent;

  background:
    linear-gradient(180deg,
      var(--color-primary),
      var(--color-secondary)) padding-box;

  background-clip: padding-box;

  transition:
    background .2s ease,
    opacity .2s ease;

  opacity: .82;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 1;

  background:
    linear-gradient(180deg,
      var(--color-secondary),
      var(--color-primary)) padding-box;
}

/* DARK MODE */

html.theme-dark::-webkit-scrollbar-track,
body.theme-dark::-webkit-scrollbar-track,
body.theme-dark ::-webkit-scrollbar-track {
  background:
    color-mix(in srgb,
      var(--color-surface-soft) 88%,
      black);
}

html.theme-dark::-webkit-scrollbar-thumb,
body.theme-dark::-webkit-scrollbar-thumb,
body.theme-dark ::-webkit-scrollbar-thumb {
  opacity: .9;
}

/* FIREFOX */

* {
  scrollbar-width: thin;

  scrollbar-color:
    var(--color-primary) color-mix(in srgb,
      var(--color-surface) 92%,
      transparent);
}

html.theme-dark,
body.theme-dark,
body.theme-dark * {
  scrollbar-color:
    var(--color-primary) color-mix(in srgb,
      var(--color-surface-soft) 88%,
      black);
}

/* =========================================
   THEME / HEADER ICONS
========================================= */

.dashboard-header-actions img,
.theme-toggle img {
  filter: brightness(0) invert(1);

  transition: filter .2s ease;
}

/* body.theme-dark .dashboard-header-actions img,
body.theme-dark .theme-toggle img {
  filter: brightness(0) invert(1);
} */