/* ════════════════════════════════════════════════════════════════
   IN DIGITAL — DESIGN TOKENS v7
   Três camadas. Componentes e telas só consomem a camada 2 (semântica).
   Para mudar o visual, altere a camada 1 (primitivos) ou o mapeamento
   da camada 2 — nenhuma tela precisa ser tocada (CH-07).

   1. PRIMITIVOS   valores brutos de marca, neutros e status
   2. SEMÂNTICOS   papel de cada cor/medida (fundo, texto, borda, ação…)
                   — mantém os nomes já usados pelo site e pelo admin
   3. TEMA         hook para variações futuras (ex.: tema por afiliado),
                   sobrescrevendo apenas a camada 2 em [data-brand="…"]

   Tema único: light (CH-06). Não há mais modo escuro.
════════════════════════════════════════════════════════════════ */

/* ── 1. PRIMITIVOS ──────────────────────────────────────────── */
:root {
  /* Marca (extraída do logo) */
  --p-purple-600:  #7920CA;
  --p-purple-500:  #A021B9;
  --p-magenta-500: #C44090;
  --p-coral-500:   #E85A6A;
  --p-orange-400:  #F97255;

  /* Neutros com matiz roxo */
  --p-ink-900: #12103A;
  --p-ink-850: #1A1730;
  --p-ink-700: #342F62;
  --p-ink-650: #4A4568;
  --p-ink-500: #6B6299;
  --p-ink-450: #6A6590;
  --p-ink-300: #A8A3C8;
  --p-ink-250: #B8B0D8;
  --p-lilac-50:  #F8F7FF;
  --p-lilac-75:  #FBFAFE;
  --p-lilac-100: #F0EEFF;
  --p-lilac-150: #F4F2F9;
  --p-lilac-175: #F0EEF7;
  --p-lilac-200: #E8E4FF;
  --p-lilac-250: #ECE9F5;
  --p-lilac-300: #DDD8FF;
  --p-lilac-325: #E4DFF3;
  --p-white:     #FFFFFF;

  /* Status */
  --p-green-600:  #15914F;
  --p-green-500:  #22C55E;
  --p-yellow-400: #FBBF24;
  --p-yellow-500: #EAB308;
  --p-red-500:    #EF4444;
  --p-blue-500:   #3B82F6;

  /* Tipografia */
  --p-font-display: 'Montserrat', sans-serif;
  --p-font-body:    'DM Sans', sans-serif;
  --p-font-mono:    'DM Mono', monospace;
}

/* ── 2. SEMÂNTICOS ──────────────────────────────────────────── */
:root {
  /* Marca */
  --clr-purple:  var(--p-purple-600);
  --clr-mid:     var(--p-purple-500);
  --clr-magenta: var(--p-magenta-500);
  --clr-coral:   var(--p-coral-500);
  --clr-warm:    var(--p-orange-400);
  --brand-purple:  var(--p-purple-600);
  --brand-magenta: var(--p-magenta-500);
  --brand-coral:   var(--p-orange-400);

  --grad-brand:    linear-gradient(135deg,var(--p-purple-600) 0%,var(--p-purple-500) 28%,var(--p-magenta-500) 58%,var(--p-coral-500) 82%,var(--p-orange-400) 100%);
  --grad-brand-45: linear-gradient(45deg,var(--p-purple-600),var(--p-magenta-500),var(--p-orange-400));
  --brand-grad:    linear-gradient(135deg,var(--p-purple-600) 0%,var(--p-magenta-500) 55%,var(--p-orange-400) 100%);
  --grad-subtle:   linear-gradient(135deg,rgba(121,32,202,.10) 0%,rgba(249,114,85,.06) 100%);
  --grad-glow:     radial-gradient(ellipse 60% 40% at 50% 0%,rgba(196,64,144,.18) 0%,transparent 70%);

  /* Superfícies — site e áreas logadas */
  --bg-base:     var(--p-lilac-50);
  --bg-raised:   var(--p-white);
  --bg-surface:  var(--p-lilac-100);
  --bg-elevated: var(--p-lilac-200);
  --bg-overlay:  var(--p-lilac-300);

  /* Superfícies — admin */
  --bg-app:     var(--p-lilac-150);
  --bg-sidebar: var(--p-white);
  --bg-panel:   var(--p-white);
  --bg-card:    var(--p-lilac-75);
  --bg-input:   var(--p-lilac-175);
  --bg-hover:   var(--p-lilac-250);
  --bg-active:  var(--p-lilac-325);
  --bg-stripe:  rgba(0,0,0,.02);

  /* Vidro (site) */
  --glass-bg:         rgba(121,32,202,.045);
  --glass-bg-hov:     rgba(121,32,202,.085);
  --glass-border:     rgba(121,32,202,.12);
  --glass-border-hov: rgba(196,64,144,.35);

  /* Bordas (admin) */
  --bdr:        rgba(0,0,0,.09);
  --bdr-strong: rgba(0,0,0,.16);
  --bdr-brand:  rgba(121,32,202,.4);
  --bdr-focus:  rgba(196,64,144,.55);

  /* Texto — site */
  --txt-primary:   var(--p-ink-900);
  --txt-secondary: var(--p-ink-700);
  --txt-muted:     var(--p-ink-500);
  --txt-faint:     var(--p-ink-250);
  /* Texto — admin */
  --txt-1: var(--p-ink-850);
  --txt-2: var(--p-ink-650);
  --txt-3: var(--p-ink-450);
  --txt-4: var(--p-ink-300);

  /* Status */
  --clr-success: var(--p-green-600);
  --clr-warning: var(--p-yellow-400);
  --s-green:  var(--p-green-500);  --s-green-bg:  rgba(34,197,94,.10);  --s-green-bdr:  rgba(34,197,94,.22);
  --s-yellow: var(--p-yellow-500); --s-yellow-bg: rgba(234,179,8,.10);  --s-yellow-bdr: rgba(234,179,8,.22);
  --s-red:    var(--p-red-500);    --s-red-bg:    rgba(239,68,68,.10);  --s-red-bdr:    rgba(239,68,68,.22);
  --s-blue:   var(--p-blue-500);   --s-blue-bg:   rgba(59,130,246,.10); --s-blue-bdr:   rgba(59,130,246,.22);
  --s-purple-bg: rgba(121,32,202,.12); --s-purple-bdr: rgba(121,32,202,.28);

  /* Sombras */
  --shadow-glow:    0 0 80px rgba(196,64,144,.22);
  --shadow-card:    0 16px 48px rgba(0,0,0,.10);
  --shadow-btn:     0 8px 28px rgba(196,64,144,.30);
  --shadow-btn-hov: 0 14px 44px rgba(196,64,144,.58);
  --shadow-sm:      0 1px 4px rgba(0,0,0,.35);
  --shadow-md:      0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:      0 8px 32px rgba(80,60,120,.14);
  --shadow-brand:   0 4px 18px rgba(121,32,202,.35);

  /* Raios */
  --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-xl: 36px; --r-pill: 9999px;
  --r: 6px;          /* admin: raio padrão */
  --r-admin-lg: 10px; /* admin: raio grande */

  /* Tipografia */
  --font-display: var(--p-font-display);
  --font-body:    var(--p-font-body);
  --font-ui:      var(--p-font-body);
  --font-brand:   var(--p-font-display);
  --font-mono:    var(--p-font-mono);

  /* Espaçamento (admin) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Movimento */
  --t-fast: 150ms ease; --t-base: 260ms ease; --t-slow: 420ms ease;

  /* Layout */
  --nav-h: 72px; --max-w: 1160px;
  --sidebar-w: 220px; --topbar-h: 52px;
}

/* ── 3. TEMA (hook para o futuro) ───────────────────────────────
   Exemplo, desativado: um afiliado com cor de destaque própria.
   [data-brand="afiliado-exemplo"] { --clr-coral: #0E9F6E; }
   Decisão pendente: se haverá tema por afiliado. */