/* =============================================================
   SEMOG — Brand tokens para shadcn/ui (preset radix-luma)
   -------------------------------------------------------------
   Mapeia a paleta e tipografia Semog para as variáveis CSS que
   o shadcn espera. Importar DEPOIS dos defaults do shadcn.
   ============================================================= */

@import url('../../colors_and_type.css');

:root {
  /* ---- Surfaces -------------------------------------------- */
  --background: #FFFFFF;
  --foreground: var(--blue-700);          /* #16265D — texto principal levemente mais escuro que o core */

  --card: #FFFFFF;
  --card-foreground: var(--blue-700);

  --popover: #FFFFFF;
  --popover-foreground: var(--blue-700);

  /* ---- Primary (Semog Blue World) -------------------------- */
  --primary: var(--blue-600);             /* #1B2D70 */
  --primary-foreground: #FFFFFF;

  /* ---- Secondary (Sky — apoio luminoso) -------------------- */
  --secondary: var(--sky-200);            /* #C9E4F3 */
  --secondary-foreground: var(--blue-700);

  /* ---- Muted (Gray Mist scale) ----------------------------- */
  --muted: var(--gray-100);               /* #ECECEF */
  --muted-foreground: var(--gray-500);    /* #6C6C78 */

  /* ---- Accent (sutil, pra hover/focus) --------------------- */
  --accent: var(--sky-100);               /* #E2F1F9 */
  --accent-foreground: var(--blue-700);

  /* ---- Destructive ----------------------------------------- */
  --destructive: #B33A3A;
  --destructive-foreground: #FFFFFF;

  /* ---- Borders / inputs / focus rings ---------------------- */
  --border: var(--gray-200);              /* #D9D9DF */
  --input: var(--gray-200);
  --ring: var(--blue-500);                /* #2F4FA0 — focus visível mas não estridente */

  /* ---- Radius (Luma é levemente mais arredondado) ---------- */
  --radius: 0.625rem;                     /* 10px */

  /* ---- Tipografia ------------------------------------------ */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Saira', sans-serif;    /* usar em h1/h2 e display numbers */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Charts (escala azul Semog para data viz) ------------ */
  --chart-1: var(--blue-600);
  --chart-2: var(--sky-400);
  --chart-3: var(--blue-400);
  --chart-4: var(--gray-400);
  --chart-5: var(--sky-200);

  /* ---- Sidebar (shadcn 0.2 — agrupado próprio) ------------- */
  --sidebar: var(--blue-700);             /* navy slab */
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: var(--sky-300);
  --sidebar-primary-foreground: var(--blue-800);
  --sidebar-accent: rgba(255, 255, 255, 0.08);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.10);
  --sidebar-ring: var(--sky-400);
}

/* ---- Dark mode (estrutural — usa o blue-800/900 da Semog) -- */
.dark {
  --background: var(--blue-900);          /* #0A1330 */
  --foreground: var(--gray-100);

  --card: var(--blue-800);
  --card-foreground: var(--gray-100);

  --popover: var(--blue-800);
  --popover-foreground: var(--gray-100);

  --primary: var(--sky-300);              /* invertido: sky vira CTA luminosa no dark */
  --primary-foreground: var(--blue-800);

  --secondary: rgba(255, 255, 255, 0.06);
  --secondary-foreground: var(--gray-100);

  --muted: rgba(255, 255, 255, 0.04);
  --muted-foreground: var(--gray-300);

  --accent: rgba(173, 213, 235, 0.10);
  --accent-foreground: var(--sky-200);

  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.08);
  --ring: var(--sky-400);

  --sidebar: var(--blue-900);
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: var(--sky-300);
  --sidebar-primary-foreground: var(--blue-900);
  --sidebar-accent: rgba(255, 255, 255, 0.06);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: var(--sky-400);
}

/* ---- Helpers de marca -------------------------------------- */
/*
   Princípio: no admin, gradientes ficam LEVES. Só tons claros de azul/sky
   sobre branco, pra dar uma sutil personalidade sem comprometer leitura.
   Gradientes fortes (--grad-cover) ficam reservadas pro institucional
   ou momentos especiais no admin (tela de login, empty state celebratório).
*/

/* Soft admin gradient — uso diário em cards/heros do webapp */
.bg-admin-soft {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--sky-50) 55%, #FFFFFF 100%);
}

/* Soft admin gradient — variante com mais sky (pra contraste com glass por cima) */
.bg-admin-sky {
  background: linear-gradient(135deg, var(--sky-100) 0%, var(--blue-50) 50%, var(--sky-50) 100%);
}

/* Brand gradient pesado — só pra momentos especiais (login, marketing dentro do admin) */
.bg-semog-gradient {
  background: var(--grad-cover);
}

/* Glass surface — "liquid glass" sutil, pensado pra ficar sobre fundos claros */
.surface-glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 24px -16px rgba(27, 45, 112, 0.15);
}
.dark .surface-glass {
  background: rgba(22, 38, 93, 0.45);    /* blue-700 com alpha — base pro glass dark */
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 24px -16px rgba(0, 0, 0, 0.40);
}