/* tokens.css — SecScore design system (basecoat-ui / shadcn HSL) */

:root {
  /* Light defaults (mantidos para futuro toggle; o app abre em dark) */
  --background:        220 25% 98%;
  --foreground:        222 47% 11%;

  --card:              0 0% 100%;
  --card-foreground:   222 47% 11%;

  --popover:           0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary:           222 47% 11%;
  --primary-foreground: 210 40% 98%;

  --secondary:         210 40% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted:             210 40% 96%;
  --muted-foreground:  215 16% 47%;

  --accent:            221 83% 53%;
  --accent-foreground: 0 0% 100%;

  --destructive:       0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --success:           142 71% 45%;
  --warning:           38  92% 50%;
  --info:              199 89% 48%;

  --border:            214 32% 91%;
  --input:             214 32% 91%;
  --ring:              221 83% 53%;

  --radius: 0.75rem;
}

.dark {
  --background:        222 47% 6%;
  --foreground:        210 40% 98%;

  --card:              222 47% 9%;
  --card-foreground:   210 40% 98%;

  --popover:           222 47% 9%;
  --popover-foreground: 210 40% 98%;

  --primary:           210 40% 98%;
  --primary-foreground: 222 47% 11%;

  --secondary:         217 33% 14%;
  --secondary-foreground: 210 40% 98%;

  --muted:             217 33% 14%;
  --muted-foreground:  215 20% 65%;

  --accent:            217 91% 60%;
  --accent-foreground: 0 0% 100%;

  --destructive:       0 63% 50%;
  --destructive-foreground: 210 40% 98%;

  --border:            217 33% 18%;
  --input:             217 33% 18%;
  --ring:              217 91% 60%;
}

/* === Maturidade CIS (radar/badges) === */
:root, .dark {
  --maturity-0: 0   84% 60%;
  --maturity-1: 25  95% 53%;
  --maturity-2: 48  96% 53%;
  --maturity-3: 84  81% 44%;
  --maturity-4: 142 71% 45%;
  --maturity-5: 173 80% 40%;
}

/* === base === */
html, body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; }

/* === Background com grid sutil para pages públicas === */
.bg-grid {
  background-image:
    linear-gradient(to right, hsl(var(--border) / 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-radial-fade {
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, hsl(var(--accent) / 0.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 100%, hsl(var(--accent) / 0.08), transparent 70%),
    hsl(var(--background));
}

/* === Card com ring sutil === */
.card-ring {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 0 0 hsl(var(--border) / 0.6), 0 8px 24px -12px hsl(0 0% 0% / 0.25);
}

/* === Sidebar === */
.sidebar {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
  border-right: 1px solid hsl(var(--border));
}
.sidebar-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.875rem; color: hsl(var(--muted-foreground));
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-item:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.sidebar-item[aria-current="page"] {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-weight: 600;
}
.sidebar-section {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  padding: 0 0.75rem;
}

/* === Stat card === */
.stat-delta-up   { color: hsl(var(--success)); }
.stat-delta-down { color: hsl(var(--destructive)); }

/* === Maturity pill === */
.maturity-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem; font-weight: 600;
  background: hsl(var(--m, 215 16% 47%) / 0.16);
  color:      hsl(var(--m, 215 16% 47%));
}
.maturity-pill[data-level="0"] { --m: var(--maturity-0); }
.maturity-pill[data-level="1"] { --m: var(--maturity-1); }
.maturity-pill[data-level="2"] { --m: var(--maturity-2); }
.maturity-pill[data-level="3"] { --m: var(--maturity-3); }
.maturity-pill[data-level="4"] { --m: var(--maturity-4); }
.maturity-pill[data-level="5"] { --m: var(--maturity-5); }

/* === Logo gradient mark === */
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; border-radius: 0.625rem;
  background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(217 91% 75%) 100%);
  color: white; font-weight: 700; font-size: 0.875rem;
  box-shadow: 0 6px 16px -6px hsl(var(--accent) / 0.65);
}

/* === Hero gradient text === */
.gradient-text {
  background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(217 91% 70%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Pequenos ajustes basecoat === */
.btn { transition: transform 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.btn:active { transform: translateY(1px); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.card-header { padding: 1.25rem 1.25rem 0.5rem; }
.card-content { padding: 1.25rem; }
.card-footer  { padding: 0.5rem 1.25rem 1.25rem; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); }
::-webkit-scrollbar-track { background: transparent; }