/* ============================================================================
 * 1MZ For Artists — Design System
 * 01-tokens.css — Design Tokens (variáveis CSS)
 *
 * SINGLE SOURCE OF TRUTH para cores, tipografia, espaçamento, animação.
 * Carregar SEMPRE antes de qualquer outro CSS do plugin.
 *
 * NUNCA hard-code valores nos componentes. Se um valor não existe aqui,
 * adiciona-o aqui primeiro, depois usa via var(--rmbz-...).
 * ============================================================================ */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
   * COR — paleta única
   * ───────────────────────────────────────────────────────────────────────── */

  /* Backgrounds em escala (do mais escuro ao mais elevado) */
  --rmbz-bg-base:        #08080a;  /* fundo da página */
  --rmbz-bg-surface:     #131316;  /* cartões, modais */
  --rmbz-bg-elevated:    #1c1c20;  /* cartões dentro de cartões */
  --rmbz-bg-input:       #0e0e10;  /* inputs, selects */
  --rmbz-bg-hover:       #1f1f23;  /* hover em itens interactivos */
  /* [DS 1.5.53] Background especial para o cartão de Património Total
   * (saldo principal). Navy clássico do design antigo (#2c3e50, "midnight
   * blue" do Flat UI) — recuperado por preferência do utilizador.
   * Acrescenta calor e dimensão ao cartão financeiro central. */
  --rmbz-bg-saldo:       #2c3e50;
  /* [DS 1.5.54] Background do cartão "Acesso Artista VIP Activo".
   * Gradiente diagonal verde-escuro vibrante → preto-esverdeado neutro.
   * Cor amostrada da referência visual do utilizador (#20392b → #1e2320),
   * recupera a estética "verde radial VIP" do design antigo.
   * Aplicado via linear-gradient no modificador --vip (não pode ser
   * uma variável CSS porque os browsers não aceitam gradiente em
   * background-color shorthand). Mantemos cores soltas como tokens
   * para reutilização em sub-elementos. */
  --rmbz-bg-vip-from:    #20392b;  /* canto superior esquerdo */
  --rmbz-bg-vip-to:      #1e2320;  /* canto inferior direito */

  /* Bordas */
  --rmbz-border-subtle:  #26262b;
  --rmbz-border-strong:  #3a3a40;
  --rmbz-border-brand:   #f0b90b;

  /* Texto */
  --rmbz-text-primary:   #fafafa;
  --rmbz-text-secondary: #c4c4cc;
  --rmbz-text-muted:     #8a8a92;  /* WCAG AA em --rmbz-bg-base */
  --rmbz-text-disabled:  #4d4d52;
  --rmbz-text-on-brand:  #0a0a0a;  /* texto preto sobre dourado */

  /* Marca — dourado 1MZ Records */
  --rmbz-brand:          #f0b90b;
  --rmbz-brand-soft:     rgba(240, 185, 11, 0.12);
  --rmbz-brand-glow:     rgba(240, 185, 11, 0.25);
  --rmbz-brand-strong:   #d4a000;
  --rmbz-brand-gradient: linear-gradient(135deg, #f0b90b 0%, #d4a000 100%);

  /* Estados semânticos (com soft variants para backgrounds) */
  --rmbz-success:        #10b981;
  --rmbz-success-soft:   rgba(16, 185, 129, 0.12);
  --rmbz-success-strong: #059669;

  --rmbz-danger:         #ef4444;
  --rmbz-danger-soft:    rgba(239, 68, 68, 0.12);
  --rmbz-danger-strong:  #dc2626;

  --rmbz-warning:        #f59e0b;
  --rmbz-warning-soft:   rgba(245, 158, 11, 0.12);
  --rmbz-warning-strong: #d97706;

  --rmbz-info:           #3b82f6;
  --rmbz-info-soft:      rgba(59, 130, 246, 0.12);
  --rmbz-info-strong:    #2563eb;

  /* Accent — azul moderno para CTAs secundárias premium (ex: Levantar).
   * Pareado com o dourado da marca: dourado=acção primária/entrada,
   * azul=acção secundária/saída. Mesma família cromática do --rmbz-info
   * mas semanticamente distinto (CTAs vs alerts informativos). */
  --rmbz-accent:         #3b82f6;
  --rmbz-accent-soft:    rgba(59, 130, 246, 0.14);
  --rmbz-accent-glow:    rgba(59, 130, 246, 0.3);
  --rmbz-accent-strong:  #2563eb;

  /* ─────────────────────────────────────────────────────────────────────────
   * TIPOGRAFIA
   *
   * Usamos um pairing de carácter editorial:
   *   - Display: Bricolage Grotesque  (títulos — variável, com caráter)
   *   - Body:    Geist Sans           (corpo — refinado, leitura óptima)
   *   - Mono:    JetBrains Mono       (montantes, IDs, números tabulares)
   *
   * Carregadas via Google Fonts no enqueue (rmbz_enqueue_design_system).
   * Fallbacks system-ui garantem que tudo continua a funcionar offline.
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-font-display: 'Bricolage Grotesque', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rmbz-font-body:    'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rmbz-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Escala tipográfica (modular, base 16px) */
  --rmbz-text-2xs:  0.6875rem;  /* 11px — captions, badges */
  --rmbz-text-xs:   0.75rem;    /* 12px — meta info */
  --rmbz-text-sm:   0.875rem;   /* 14px — secondary text */
  --rmbz-text-base: 1rem;       /* 16px — body */
  --rmbz-text-lg:   1.125rem;   /* 18px — emphasized body */
  --rmbz-text-xl:   1.375rem;   /* 22px — section titles */
  --rmbz-text-2xl:  1.75rem;    /* 28px — page titles */
  --rmbz-text-3xl:  2.25rem;    /* 36px — hero numbers (saldos) */
  --rmbz-text-4xl:  3rem;       /* 48px — display */

  /* Pesos */
  --rmbz-weight-normal:    400;
  --rmbz-weight-medium:    500;
  --rmbz-weight-semibold:  600;
  --rmbz-weight-bold:      700;
  --rmbz-weight-black:     800;

  /* Line-heights */
  --rmbz-leading-tight:   1.15;
  --rmbz-leading-snug:    1.35;
  --rmbz-leading-normal:  1.55;
  --rmbz-leading-relaxed: 1.7;

  /* Tracking (letter-spacing) */
  --rmbz-tracking-tight:  -0.02em;
  --rmbz-tracking-normal: 0;
  --rmbz-tracking-wide:   0.04em;
  --rmbz-tracking-wider:  0.08em;  /* para "VIP", "ARTISTA", micro-labels */

  /* ─────────────────────────────────────────────────────────────────────────
   * ESPAÇAMENTO — escala 4px
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-space-px:  1px;
  --rmbz-space-0:   0;
  --rmbz-space-1:   0.25rem;   /*  4px */
  --rmbz-space-2:   0.5rem;    /*  8px */
  --rmbz-space-3:   0.75rem;   /* 12px */
  --rmbz-space-4:   1rem;      /* 16px */
  --rmbz-space-5:   1.25rem;   /* 20px */
  --rmbz-space-6:   1.5rem;    /* 24px */
  --rmbz-space-8:   2rem;      /* 32px */
  --rmbz-space-10:  2.5rem;    /* 40px */
  --rmbz-space-12:  3rem;      /* 48px */
  --rmbz-space-16:  4rem;      /* 64px */
  --rmbz-space-20:  5rem;      /* 80px */

  /* ─────────────────────────────────────────────────────────────────────────
   * RAIO
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-radius-xs:   4px;
  --rmbz-radius-sm:   8px;
  --rmbz-radius-md:   12px;
  --rmbz-radius-lg:   16px;
  --rmbz-radius-xl:   24px;
  --rmbz-radius-pill: 9999px;
  --rmbz-radius-full: 50%;

  /* ─────────────────────────────────────────────────────────────────────────
   * SOMBRAS
   *
   * Filosofia: usar sombras com ligeiro tinte dourado nas peças "premium"
   * (modais, cartões VIP) para reforçar a identidade da marca.
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --rmbz-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.35);
  --rmbz-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.45);
  --rmbz-shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.55);
  --rmbz-shadow-xl:   0 24px 60px rgba(0, 0, 0, 0.65);

  /* Sombras "premium" — com tinte dourado */
  --rmbz-shadow-brand-sm: 0 4px 14px rgba(240, 185, 11, 0.18);
  --rmbz-shadow-brand-md: 0 8px 28px rgba(240, 185, 11, 0.25);
  --rmbz-shadow-brand-lg: 0 16px 48px rgba(240, 185, 11, 0.35);

  /* Sombras "premium" — com tinte accent (azul). Par directo das brand. */
  --rmbz-shadow-accent-sm: 0 4px 14px rgba(59, 130, 246, 0.22);
  --rmbz-shadow-accent-md: 0 8px 28px rgba(59, 130, 246, 0.30);

  /* Anel de focus — substitui o outline horrível do browser */
  --rmbz-ring-brand:  0 0 0 3px rgba(240, 185, 11, 0.4);
  --rmbz-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.4);

  /* ─────────────────────────────────────────────────────────────────────────
   * MOVIMENTO
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --rmbz-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --rmbz-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --rmbz-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rmbz-ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);

  --rmbz-duration-instant: 100ms;
  --rmbz-duration-fast:    180ms;
  --rmbz-duration-normal:  280ms;
  --rmbz-duration-slow:    420ms;
  --rmbz-duration-slower:  600ms;

  /* ─────────────────────────────────────────────────────────────────────────
   * Z-INDEX (organizado, sem números mágicos)
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-z-base:      1;
  --rmbz-z-dropdown:  100;
  --rmbz-z-sticky:    200;
  --rmbz-z-overlay:   900;
  --rmbz-z-modal:     1000;
  --rmbz-z-popover:   1050;
  --rmbz-z-toast:     1100;
  --rmbz-z-tooltip:   1200;

  /* ─────────────────────────────────────────────────────────────────────────
   * BREAKPOINTS (referência — usar via @media direto)
   *
   *   sm: 640px    md: 768px    lg: 1024px    xl: 1280px
   *
   * Mobile-first: estilos base = mobile, @media min-width = adições.
   * ───────────────────────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────────────────────
   * LAYOUT
   * ───────────────────────────────────────────────────────────────────────── */

  --rmbz-container-sm:  640px;
  --rmbz-container-md:  768px;
  --rmbz-container-lg:  960px;   /* default da área do artista */
  --rmbz-container-xl:  1200px;  /* default do dashboard de distribuição */
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ACESSIBILIDADE — respeita preferência de movimento reduzido
 * ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --rmbz-duration-instant: 0ms;
    --rmbz-duration-fast:    0ms;
    --rmbz-duration-normal:  0ms;
    --rmbz-duration-slow:    0ms;
    --rmbz-duration-slower:  0ms;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THEME OVERRIDES (futuro — high contrast, light mode opcional)
 *
 * Para activar high contrast: adicionar data-rmbz-theme="hc" ao <body>.
 * Os componentes herdam automaticamente — não precisam de saber do tema.
 * ───────────────────────────────────────────────────────────────────────── */

[data-rmbz-theme="hc"] {
  --rmbz-bg-base:        #000000;
  --rmbz-bg-surface:     #0a0a0a;
  --rmbz-bg-elevated:    #141414;
  --rmbz-bg-saldo:       #1f2c39;  /* Navy mais escuro para HC mode */
  --rmbz-bg-vip-from:    #142a1c;  /* Verde mais escuro para HC mode */
  --rmbz-bg-vip-to:      #0e1411;
  --rmbz-text-primary:   #ffffff;
  --rmbz-text-secondary: #e5e5e5;
  --rmbz-text-muted:     #b5b5b5;
  --rmbz-border-subtle:  #4a4a4a;
  --rmbz-border-strong:  #6a6a6a;
}
