/* =====================================================================
   MUSIDOM — Design Tokens
   Identidade extraída da logomarca:
     Lime  #D2E62D  (fundo da marca)
     Ink   #2B2825  (traço do violão e tipografia)
   ===================================================================== */

:root {
  /* ---------- Marca: Lime Musidom ---------- */
  --lime-50:  #FAFDE9;
  --lime-100: #F3FAC7;
  --lime-200: #E9F695;
  --lime-300: #DEF05C;
  --lime-400: #D2E62D;   /* ★ cor oficial da marca */
  --lime-500: #BFD41E;
  --lime-600: #9DB015;
  --lime-700: #778514;
  --lime-800: #5B6717;
  --lime-900: #3F4713;

  /* ---------- Neutros quentes (derivados do traço da marca) ---------- */
  --ink-950: #0D0D0A;
  --ink-900: #141410;
  --ink-850: #1A1A15;
  --ink-800: #22221A;
  --ink-750: #292921;
  --ink-700: #2E2E24;
  --ink-600: #3D3D31;
  --ink-500: #55554A;
  --ink-400: #7A7A6E;
  --ink-300: #A3A399;
  --ink-200: #C9C9C1;
  --ink-150: #DEDED7;
  --ink-100: #EBEBE4;
  --ink-50:  #F7F7F1;
  --white:   #FFFFFF;

  /* ---------- Acentos de apoio (gráficos, categorias, estados) ---------- */
  --violet: #7C5CFF;
  --violet-soft: #EDE9FF;
  --sky:    #38BDF8;
  --sky-soft: #E0F4FE;
  --amber:  #F5A524;
  --amber-soft: #FEF3DC;
  --rose:   #F5566B;
  --rose-soft: #FEE7EA;
  --mint:   #2FBF87;
  --mint-soft: #DFF6EC;

  /* ---------- Semânticos ---------- */
  --success: var(--mint);
  --warning: var(--amber);
  --danger:  var(--rose);
  --info:    var(--sky);

  /* ---------- Superfícies (tema claro — padrão do portal) ---------- */
  --bg:            #F7F7F1;
  --bg-subtle:     #EFEFE7;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBF6;
  --surface-inset: #F2F2EA;
  --border:        rgba(20, 20, 16, .10);
  --border-strong: rgba(20, 20, 16, .18);
  --text:          var(--ink-900);
  --text-soft:     var(--ink-500);
  --text-muted:    var(--ink-400);
  --text-invert:   var(--ink-50);
  --accent:        var(--lime-400);
  --accent-ink:    var(--ink-900);      /* texto sobre o lime */
  --accent-hover:  var(--lime-300);
  --ring:          rgba(191, 212, 30, .45);

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 2px rgba(13,13,10,.06);
  --shadow-sm: 0 2px 8px rgba(13,13,10,.06), 0 1px 2px rgba(13,13,10,.04);
  --shadow-md: 0 8px 24px rgba(13,13,10,.08), 0 2px 6px rgba(13,13,10,.04);
  --shadow-lg: 0 24px 56px rgba(13,13,10,.12), 0 6px 16px rgba(13,13,10,.06);
  --shadow-xl: 0 40px 90px rgba(13,13,10,.18);
  --shadow-lime: 0 12px 32px rgba(191,212,30,.35);

  /* ---------- Raios ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------- Espaçamento (escala 4pt) ---------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-7: 2rem;    --s-8: 2.5rem;
  --s-9: 3rem;    --s-10: 4rem;   --s-11: 5rem;   --s-12: 6.5rem;
  --s-13: 8rem;

  /* ---------- Tipografia ---------- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida (clamp) — funciona do mobile ao desktop sem media query */
  --fs-xs:   clamp(.72rem, .70rem + .1vw, .78rem);
  --fs-sm:   clamp(.82rem, .80rem + .1vw, .88rem);
  --fs-base: clamp(.95rem, .92rem + .15vw, 1.02rem);
  --fs-md:   clamp(1.05rem, 1rem + .25vw, 1.18rem);
  --fs-lg:   clamp(1.22rem, 1.12rem + .45vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --fs-2xl:  clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-3xl:  clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
  --fs-4xl:  clamp(2.9rem, 1.8rem + 4.6vw, 5.8rem);

  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-narrow: 780px;
  --container-wide: 1480px;
  --header-h: 76px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 560ms;
  --t-slower: 900ms;

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-cursor: 600;
}

/* =====================================================================
   Tema escuro — usado por padrão no painel e disponível no portal
   ===================================================================== */
[data-theme="dark"] {
  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --surface:       var(--ink-900);
  --surface-2:     var(--ink-850);
  --surface-inset: var(--ink-800);
  --border:        rgba(235, 235, 228, .10);
  --border-strong: rgba(235, 235, 228, .20);
  --text:          #F2F2EA;
  --text-soft:     var(--ink-300);
  --text-muted:    var(--ink-400);
  --text-invert:   var(--ink-900);
  --accent:        var(--lime-400);
  --accent-ink:    var(--ink-950);
  --accent-hover:  var(--lime-300);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 10px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 28px 64px rgba(0,0,0,.55);
  --shadow-xl: 0 40px 90px rgba(0,0,0,.6);
  --shadow-lime: 0 12px 40px rgba(191,212,30,.22);

  --violet-soft: rgba(124,92,255,.16);
  --sky-soft:    rgba(56,189,248,.16);
  --amber-soft:  rgba(245,165,36,.16);
  --rose-soft:   rgba(245,86,107,.16);
  --mint-soft:   rgba(47,191,135,.16);
}

/* Respeita o sistema quando o usuário não escolheu manualmente */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: var(--ink-950); --bg-subtle: var(--ink-900);
    --surface: var(--ink-900); --surface-2: var(--ink-850);
    --surface-inset: var(--ink-800);
    --border: rgba(235,235,228,.10); --border-strong: rgba(235,235,228,.20);
    --text: #F2F2EA; --text-soft: var(--ink-300); --text-invert: var(--ink-900);
    --accent-ink: var(--ink-950);
  }
}