/* ═══════════════════════════════════════════════════════════════
   ESTÚDIO LASER PRO — DESIGN TOKENS  v2.0
   Fonte única da verdade visual. Carregado antes de qualquer CSS.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── SUPERFÍCIES (escala numérica = hierarquia visual) ──────── */
  --surface-0: #09070e;   /* fundo absoluto */
  --surface-1: #0e0b15;   /* background do body */
  --surface-2: #141120;   /* painéis padrão */
  --surface-3: #1b1829;   /* painéis elevados */
  --surface-4: #221f32;   /* modais, dropdowns */

  /* aliases de compatibilidade (usados nos CSS existentes) */
  --bg:         var(--surface-0);
  --bg-2:       var(--surface-1);
  --panel:      var(--surface-2);
  --panel-2:    var(--surface-3);
  --panel-3:    var(--surface-4);

  /* ── BORDAS ─────────────────────────────────────────────────── */
  --border-lo:      rgba(255,255,255,.05);
  --border-mid:     rgba(255,255,255,.09);
  --border-hi:      rgba(255,255,255,.16);
  --stroke:         var(--border-mid);
  --stroke-strong:  var(--border-hi);

  /* ── OURO (única fonte, usada em todo o sistema) ────────────── */
  --gold:      #c8a45c;   /* âmbar-ouro base */
  --gold-2:    #dbbf7a;   /* meio-tom */
  --gold-hi:   #edcf96;   /* highlight suave */
  --gold-rgb:  200,164,92;

  /* ── ACENTO (teal — ação primária) ─────────────────────────── */
  --accent:     #42c9c0;
  --accent-hi:  #6ddbd3;
  --teal:       var(--accent);
  --accent-rgb: 66,201,192;

  /* ── TEXTO ──────────────────────────────────────────────────── */
  --text:     #f0ecf7;
  --muted:    #9890a8;
  --muted-2:  #615a72;
  --fg:       var(--text);

  /* ── STATUS ─────────────────────────────────────────────────── */
  --danger:   #d45555;
  --success:  #4caf50;
  --info:     #38a7ff;

  /* ── OVERLAYS ───────────────────────────────────────────────── */
  --overlay-soft:    rgba(7,5,13,.76);
  --overlay-medium:  rgba(7,5,13,.88);
  --overlay-strong:  rgba(7,5,13,.94);

  /* ── TIPOGRAFIA ─────────────────────────────────────────────── */
  --ui-font:    "DM Sans", sans-serif;
  --title-font: "Cormorant Garamond", serif;

  /* ── ESCALA DE TIPO ─────────────────────────────────────────── */
  --text-2xs:  8px;   /* micro: shortcut keys, badges de status */
  --text-xs:  10px;   /* labels de seção */
  --text-sm:  11px;   /* texto de apoio, botões compactos */
  --text-md:  13px;   /* corpo padrão */
  --text-lg:  15px;   /* corpo destacado */
  --text-xl:  20px;   /* headings de modal */
  --text-2xl: 26px;   /* títulos principais */

  /* ── ESCALA DE RAIO ─────────────────────────────────────────────
     Reduzida em v2.1 para alinhar à estética de ferramentas
     profissionais (Linear, Figma, Adobe XD). Mantém leve
     arredondamento, descarta visual de app casual. */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;   /* inputs, botões inline */
  --radius-lg:   10px;   /* painéis internos, cards */
  --radius-xl:   12px;   /* painéis principais */
  --radius-2xl:  14px;   /* modais */
  --radius-pill: 999px;  /* pills, badges */

  /* ── SOMBRAS ────────────────────────────────────────────────── */
  --shadow-sm:     0 4px 16px rgba(0,0,0,.30);
  --shadow-md:     0 12px 40px rgba(0,0,0,.40);
  --shadow-lg:     0 28px 80px rgba(0,0,0,.52);
  --shadow:        var(--shadow-lg);
  --shadow-gold:   0 0 32px rgba(200,164,92,.22);
  --shadow-accent: 0 0 24px rgba(66,201,192,.18);

  /* ── TRANSIÇÕES ─────────────────────────────────────────────── */
  --ease-ui:    .16s ease;
  --ease-hover: .20s ease;
  --ease-modal: .26s ease;

  /* ── LAYOUT ─────────────────────────────────────────────────── */
  --topbar-offset: 48px;
  --sidenav-w:     84px;
  --content-panel-w: 320px;
  --brand-area-w:  152px;
}