/* ============================================================
   LUMICORE — Design Tokens
   v1.0 · Fonte única de verdade para marketing, SaaS e sistemas sob medida.
   Importe este arquivo antes de qualquer CSS de componente.
   ============================================================ */

:root {
  /* ---------- COR · Núcleo (azul institucional) ---------- */
  --lc-blue-50:  #EDF5FC;
  --lc-blue-100: #D3E6F8;
  --lc-blue-200: #A7CDF0;
  --lc-blue-300: #6FADE3;
  --lc-blue-400: #3C8BD1;
  --lc-blue-500: #0E6BB8;  /* Signal — ação primária */
  --lc-blue-600: #0B5698;
  --lc-blue-700: #0A4477;
  --lc-blue-800: #0A3358;
  --lc-blue-900: #08243E;
  --lc-blue-950: #08192B;  /* Core — superfícies escuras */

  /* ---------- COR · Feixe (ciano luminoso) ---------- */
  --lc-beam-50:  #E8FBFD;
  --lc-beam-100: #C6F4F9;
  --lc-beam-200: #8FE9F3;
  --lc-beam-300: #52DBEB;
  --lc-beam-400: #25CEE4;  /* Beam — acento e indicador de estado */
  --lc-beam-500: #12AEC5;
  --lc-beam-600: #0E8BA0;
  --lc-beam-700: #106E7F;
  --lc-beam-800: #125868;
  --lc-beam-900: #134958;

  /* ---------- COR · Neutros (viés frio, harmonizado ao azul) ---------- */
  --lc-n-0:   #FFFFFF;
  --lc-n-25:  #FAFCFE;
  --lc-n-50:  #F4F8FB;
  --lc-n-100: #EAF0F6;
  --lc-n-200: #DCE6EF;
  --lc-n-300: #C3D2E0;
  --lc-n-400: #9AACBD;
  --lc-n-500: #74879A;
  --lc-n-600: #5A6E7F;
  --lc-n-700: #42535F;
  --lc-n-800: #2B3945;
  --lc-n-900: #1A2530;
  --lc-n-950: #0D1B26;

  /* ---------- COR · Semântica ---------- */
  --lc-success:    #128A5E;
  --lc-success-bg: #E6F5EF;
  --lc-warning:    #B0700A;
  --lc-warning-bg: #FCF2E0;
  --lc-danger:     #C0392F;
  --lc-danger-bg:  #FBEBE9;
  --lc-info:       var(--lc-blue-500);
  --lc-info-bg:    var(--lc-blue-50);

  /* ---------- PAPÉIS SEMÂNTICOS (use estes na UI, não os brutos) ---------- */
  --lc-bg:            var(--lc-n-0);
  --lc-bg-subtle:     var(--lc-n-50);
  --lc-bg-sunken:     var(--lc-n-100);
  --lc-bg-inverse:    var(--lc-blue-950);
  --lc-surface:       var(--lc-n-0);
  --lc-border:        var(--lc-n-200);
  --lc-border-strong: var(--lc-n-300);
  --lc-text:          var(--lc-n-950);
  --lc-text-muted:    var(--lc-n-600);
  --lc-text-subtle:   var(--lc-n-500);
  --lc-text-inverse:  var(--lc-n-0);
  --lc-accent:        var(--lc-blue-500);
  --lc-accent-hover:  var(--lc-blue-600);
  --lc-accent-active: var(--lc-blue-700);
  --lc-beam:          var(--lc-beam-400);

  /* ---------- TIPOGRAFIA ---------- */
  --lc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lc-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lc-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --lc-text-display-xl: 3.5rem;   /* 56 */
  --lc-text-display-l:  2.5rem;   /* 40 */
  --lc-text-h1:         2rem;     /* 32 */
  --lc-text-h2:         1.5rem;   /* 24 */
  --lc-text-h3:         1.25rem;  /* 20 */
  --lc-text-h4:         1.0625rem;/* 17 */
  --lc-text-body-lg:    1.0625rem;/* 17 */
  --lc-text-body:       0.9375rem;/* 15 */
  --lc-text-body-sm:    0.875rem; /* 14 — padrão em telas densas */
  --lc-text-caption:    0.75rem;  /* 12 */
  --lc-text-overline:   0.6875rem;/* 11 */

  --lc-leading-tight:  1.08;
  --lc-leading-snug:   1.25;
  --lc-leading-normal: 1.55;
  --lc-leading-loose:  1.7;

  --lc-tracking-display: -0.022em;
  --lc-tracking-heading: -0.012em;
  --lc-tracking-body:    0;
  --lc-tracking-overline: 0.12em;

  --lc-weight-regular:  400;
  --lc-weight-medium:   500;
  --lc-weight-semibold: 600;
  --lc-weight-bold:     700;

  /* ---------- ESPAÇAMENTO · grade base 4px ---------- */
  --lc-space-1:  0.25rem;  /* 4  */
  --lc-space-2:  0.5rem;   /* 8  */
  --lc-space-3:  0.75rem;  /* 12 */
  --lc-space-4:  1rem;     /* 16 */
  --lc-space-5:  1.5rem;   /* 24 */
  --lc-space-6:  2rem;     /* 32 */
  --lc-space-7:  3rem;     /* 48 */
  --lc-space-8:  4rem;     /* 64 */
  --lc-space-9:  6rem;     /* 96 */
  --lc-space-10: 8rem;     /* 128 */

  /* ---------- RAIO ---------- */
  --lc-radius-xs:   2px;
  --lc-radius-sm:   4px;
  --lc-radius-md:   6px;   /* botões, campos */
  --lc-radius-lg:   8px;   /* cards */
  --lc-radius-xl:   12px;  /* modais, painéis */
  --lc-radius-full: 999px; /* apenas avatares e badges de contagem */

  /* ---------- ELEVAÇÃO · sombra fria e discreta ---------- */
  --lc-shadow-xs: 0 1px 2px rgba(13, 27, 38, 0.06);
  --lc-shadow-sm: 0 1px 3px rgba(13, 27, 38, 0.08), 0 1px 2px rgba(13, 27, 38, 0.04);
  --lc-shadow-md: 0 4px 12px rgba(13, 27, 38, 0.08), 0 1px 3px rgba(13, 27, 38, 0.05);
  --lc-shadow-lg: 0 12px 32px rgba(13, 27, 38, 0.10), 0 2px 8px rgba(13, 27, 38, 0.05);
  --lc-shadow-beam: 0 0 0 3px rgba(37, 206, 228, 0.35);

  /* ---------- MOVIMENTO ---------- */
  --lc-duration-fast: 120ms;
  --lc-duration-base: 180ms;
  --lc-duration-slow: 260ms;
  --lc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- LAYOUT ---------- */
  --lc-container: 1200px;
  --lc-container-narrow: 720px;
  --lc-sidebar: 260px;
  --lc-topbar: 56px;
  --lc-beam-width: 2px;

  /* ---------- FOCO (acessibilidade) ---------- */
  --lc-focus-ring: 0 0 0 2px var(--lc-n-0), 0 0 0 4px var(--lc-beam-400);
}

/* ============================================================
   TEMA ESCURO — aplique data-theme="dark" no <html> ou em um bloco
   ============================================================ */
[data-theme="dark"] {
  --lc-bg:            var(--lc-blue-950);
  --lc-bg-subtle:     #0B2137;
  --lc-bg-sunken:     #061523;
  --lc-bg-inverse:    var(--lc-n-0);
  --lc-surface:       #0D2540;
  --lc-border:        #1A3D5E;
  --lc-border-strong: #27587F;
  --lc-text:          #E8F0F7;
  --lc-text-muted:    #9DB4C9;
  --lc-text-subtle:   #7691AB;
  --lc-text-inverse:  var(--lc-blue-950);
  --lc-accent:        var(--lc-blue-400);
  --lc-accent-hover:  var(--lc-blue-300);
  --lc-accent-active: var(--lc-blue-200);
  --lc-focus-ring:    0 0 0 2px var(--lc-blue-950), 0 0 0 4px var(--lc-beam-400);
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}