/*!
 * LR Design System · Canon v1 · tokens.css
 * Source-of-truth · NÃO duplicar/inventar tokens em apps
 * Spec: docs/superpowers/specs/2026-05-28-design-system-lr-canonico.md
 * Origem visual: brand.luizramos.com.br (Brand LP showcase)
 * Última atualização: 2026-05-28
 */

/* ---------- Tokens (dark default) ---------- */
:root {
  --canvas:      #0a0a0a;
  --canvas-2:    #0e0e0e;
  --surface:     #171717;
  --surface-2:   #1f1f1f;
  --surface-3:   #242424;
  --ink:         #ededed;
  --body:        #a3a3a3;
  --muted:       #6e6e6e;
  --hairline:    #262626;
  --hairline-2:  #2e2e2e;

  --accent:      #00c573;
  --accent-hov:  #00a35e;
  --accent-soft: rgba(0, 197, 115, 0.12);
  --accent-glow: rgba(0, 197, 115, 0.28);
  --accent-on:   #000000;

  --ok:          #00c573;
  --ok-soft:     rgba(0, 197, 115, 0.12);
  --warn:        #f5a524;
  --warn-soft:   rgba(245, 165, 36, 0.12);
  --error:       #ef4444;
  --error-soft:  rgba(239, 68, 68, 0.12);

  --c-green:     #00c573;
  --c-cyan:      #06b6d4;
  --c-magenta:   #d946ef;
  --c-chumbo:    #6e6e6e;
  --c-red:       #a1191c;
  --c-amber:     #f5a524;

  --sector-c: #06B6D4;
  --sector-m: #D946EF;
  --sector-y: #EAB308;
  --sector-k: #71717A;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Consolas", monospace;

  --text-display-xl: 4.5rem;
  --text-display:    3rem;
  --text-h1:         2rem;
  --text-h2:         1.5rem;
  --text-h3:         1.25rem;
  --text-h4:         1rem;
  --text-body-lg:    1rem;
  --text-body:       0.9375rem;
  --text-sm:         0.875rem;
  --text-xs:         0.8125rem;
  --text-caption:    0.75rem;

  --leading-body:    1.5;
  --leading-heading: 1.15;

  --space-xxxs: 4px;
  --space-xxs:  8px;
  --space-xs:   12px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-xxl:  64px;

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  --sidebar-w: 240px;
  --topbar-h:  52px;
}

/* ---------- Light theme (canvas #ededed neutro · sidebar #0e0e0e dark) ---------- */
[data-theme="light"] {
  --canvas:      #ededed;
  --canvas-2:    #e0e0e0;
  --surface:     #f5f5f5;
  --surface-2:   #e2e2e2;
  --surface-3:   #cfcfcf;
  --ink:         #1a1a1a;
  --body:        #4a4a4a;
  --muted:       #787878;
  --hairline:    #cccccc;
  --hairline-2:  #b3b3b3;

  /* Semânticos escurecidos pra contraste AA em fundo claro */
  --ok:          #047a4c;
  --ok-soft:     rgba(4, 122, 76, 0.12);
  --warn:        #a16207;
  --warn-soft:   rgba(161, 98, 7, 0.12);
  --error:       #b91c1c;
  --error-soft:  rgba(185, 28, 28, 0.12);

  /* Cores fixas dos cards (versão escura pra light) */
  --c-green:     #047a4c;
  --c-cyan:      #0e7490;
  --c-magenta:   #a21caf;
  --c-chumbo:    #3f3f3f;
  --c-red:       #a1191c;
  --c-amber:     #a16207;
}

/* ===== 5 ACCENTS DARK ===== */
[data-accent="red"] {
  --accent:      #a1191c;
  --accent-hov:  #7a1316;
  --accent-soft: rgba(161, 25, 28, 0.12);
  --accent-glow: rgba(161, 25, 28, 0.28);
  --accent-on:   #fff;
}
[data-accent="green"] {
  --accent:      #00c573;
  --accent-hov:  #00a35e;
  --accent-soft: rgba(0, 197, 115, 0.12);
  --accent-glow: rgba(0, 197, 115, 0.28);
  --accent-on:   #000;
}
[data-accent="cyan"] {
  --accent:      #06b6d4;
  --accent-hov:  #0891b2;
  --accent-soft: rgba(6, 182, 212, 0.12);
  --accent-glow: rgba(6, 182, 212, 0.28);
  --accent-on:   #000;
}
[data-accent="magenta"] {
  --accent:      #d946ef;
  --accent-hov:  #c026d3;
  --accent-soft: rgba(217, 70, 239, 0.12);
  --accent-glow: rgba(217, 70, 239, 0.28);
  --accent-on:   #000;
}
[data-accent="chumbo"] {
  --accent:      #6e6e6e;
  --accent-hov:  #525252;
  --accent-soft: rgba(110, 110, 110, 0.16);
  --accent-glow: rgba(110, 110, 110, 0.28);
  --accent-on:   #fff;
}

/* ===== 5 ACCENTS LIGHT (overrides AA-compliant sobre canvas claro) ===== */
[data-theme="light"][data-accent="red"] {
  --accent:      #a1191c;
  --accent-hov:  #7a1316;
  --accent-soft: rgba(161, 25, 28, 0.10);
  --accent-glow: rgba(161, 25, 28, 0.22);
  --accent-on:   #fff;
}
[data-theme="light"][data-accent="green"] {
  --accent:      #047a4c;
  --accent-hov:  #03613c;
  --accent-soft: rgba(4, 122, 76, 0.12);
  --accent-glow: rgba(4, 122, 76, 0.26);
  --accent-on:   #fff;
}
[data-theme="light"][data-accent="cyan"] {
  --accent:      #0e7490;
  --accent-hov:  #0c5d75;
  --accent-soft: rgba(14, 116, 144, 0.12);
  --accent-glow: rgba(14, 116, 144, 0.26);
  --accent-on:   #fff;
}
[data-theme="light"][data-accent="magenta"] {
  --accent:      #a21caf;
  --accent-hov:  #86198f;
  --accent-soft: rgba(162, 28, 175, 0.12);
  --accent-glow: rgba(162, 28, 175, 0.26);
  --accent-on:   #fff;
}
[data-theme="light"][data-accent="chumbo"] {
  --accent:      #3f3f3f;
  --accent-hov:  #262626;
  --accent-soft: rgba(63, 63, 63, 0.12);
  --accent-glow: rgba(63, 63, 63, 0.22);
  --accent-on:   #fff;
}

/* ---------- Reduced motion ---------- */
@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;
  }
}