/* ============================================================
   bio-tokens.css — Tokens do /emilyboutique (overrides do shared tokens.css)

   Este arquivo é carregado DEPOIS de /static/partials/tokens.css (compartilhado
   com o painel), portanto tem precedência natural por ordem de cascade.

   tokens.css define:
     --color-bg:        light (Telegram)
     --color-surface:   light
     --color-text:      light
     --color-accent:    laranja (#e8650a)
   Esses valores vazariam no bio e impediriam os temas de aplicar.

   Arquitetura de tokens em 4 camadas:
     1. Primitive  (--primitive-*)  — valores crus, imutáveis
     2. Theme      (--theme-*)      — morfologia por preset (default + 3 temas)
     3. Component  (--color-*)      — aliases sobre tokens.css (painel compat)
     4. Usage      (nomes curtos)   — o vocabulário que o template consome
                                     (--bg, --surface, --border, --text, ...)

   [data-theme] redefine a camada 2; as camadas 3/4 re-resolvem sozinhas
   (herança de custom property) — nenhum bloco duplicado por tema.
   ============================================================ */

/* === Primitive values (raw colors, imutáveis) === */
:root {
  --primitive-neutral-900: #0f172a;
  --primitive-neutral-950: #020617;
  --primitive-emerald-500: #10b981;
  --primitive-sky-500: #38bdf8;
  --primitive-purple-500: #a855f7;
  --primitive-amber-500: #f59e0b;
  --primitive-space-sm: 8px;
  --primitive-space-md: 16px;
  --primitive-space-lg: 24px;
  --primitive-radius-sm: 12px;
  --primitive-radius-md: 18px;
  --primitive-radius-lg: 24px;
  --primitive-radius-pill: 9999px;
}

/* === Theme tokens (morphology por preset) === */

/* DEFAULT (sem [data-theme]) — preset base do bio */
:root {
  --theme-surface-canvas: var(--primitive-neutral-900);
  --theme-surface-card:   rgba(15, 23, 42, 0.80);
  --theme-surface-2:      rgba(15, 23, 42, 0.50);
  --theme-card-blur:      blur(12px);
  --theme-card-border:    1px solid rgba(255, 255, 255, 0.10);
  --theme-border-color:       rgba(255, 255, 255, 0.10);
  --theme-border-strong-color: rgba(255, 255, 255, 0.18);
  --theme-card-radius:    var(--primitive-radius-md);
  --theme-text-primary:   #f1f5f9;
  --theme-text-muted:     #94a3b8;
  --theme-text-hint:      #64748b;
  --theme-accent:         var(--primitive-emerald-500);
  --theme-accent-soft:    rgba(16, 185, 129, 0.10);
  --theme-accent-soft-2:  rgba(16, 185, 129, 0.20);
  --theme-cta-text:       #000000;
  --theme-cta-bg:         var(--theme-accent);
  --theme-cta-border:     none;
  --theme-cta-color:      var(--theme-cta-text);
  --theme-cta-shadow:     0 10px 30px var(--theme-accent-soft-2);
  --theme-cta-padding:    0.875rem 1rem;
  --theme-radius-btn:     var(--primitive-radius-md);
  --theme-radius-badge:   var(--primitive-radius-pill);
  --theme-card-bg:        var(--theme-surface-card);
  --theme-card-shadow:    none;
  --theme-card-padding:   1rem;
  --theme-list-gap:       0.75rem;
  --theme-sky:            var(--primitive-sky-500);
  --theme-font-sans:      'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* NOIR — preto absoluto, branco como único accent, Playfair Display */
[data-theme="noir"] {
  --theme-surface-canvas: #000000;
  --theme-surface-card:   #0a0a0a;
  --theme-surface-2:      #141414;
  --theme-card-blur:      none;
  --theme-card-border:    1px solid #1a1a1a;
  --theme-border-color:       #1a1a1a;
  --theme-border-strong-color: #2a2a2a;
  --theme-card-radius:    6px;
  --theme-text-primary:   #f5f5f5;
  --theme-text-muted:     #888888;
  --theme-text-hint:      #4a4a4a;
  --theme-accent:         #ffffff;
  --theme-accent-soft:    rgba(255, 255, 255, 0.06);
  --theme-accent-soft-2:  rgba(255, 255, 255, 0.12);
  --theme-cta-text:       #000000;
  --theme-sky:            #ffffff;
  --theme-font-sans:      'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* DARK-GLASS — glass pesado ciano, Outfit, gradiente decorativo */
[data-theme="dark-glass"] {
  --theme-surface-canvas: #0b0f15;
  --theme-surface-card:   rgba(255, 255, 255, 0.06);
  --theme-surface-2:      rgba(255, 255, 255, 0.08);
  --theme-card-blur:      blur(20px) saturate(160%);
  --theme-card-border:    1px solid rgba(255, 255, 255, 0.12);
  --theme-border-color:       rgba(255, 255, 255, 0.12);
  --theme-border-strong-color: rgba(255, 255, 255, 0.18);
  --theme-card-radius:    var(--primitive-radius-md);
  --theme-text-primary:   #f8fafc;
  --theme-text-muted:     #cbd5e1;
  --theme-text-hint:      #94a3b8;
  --theme-accent:         var(--primitive-sky-500);
  --theme-accent-soft:    rgba(56, 189, 248, 0.10);
  --theme-accent-soft-2:  rgba(56, 189, 248, 0.20);
  --theme-cta-text:       #000000;
  --theme-sky:            var(--primitive-sky-500);
  --theme-font-sans:      'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* MINIMAL — DeepSeek puro, serif, sem glass */
[data-theme="minimal"] {
  --theme-surface-canvas: #000000;
  --theme-surface-card:   #0a0a0a;
  --theme-surface-2:      #111111;
  --theme-card-blur:      none;
  --theme-card-border:    1px solid #151515;
  --theme-border-color:       #151515;
  --theme-border-strong-color: #222222;
  --theme-card-radius:    4px;
  --theme-text-primary:   #f0f0f0;
  --theme-text-muted:     #777777;
  --theme-text-hint:      #444444;
  --theme-accent:         #ffffff;
  --theme-accent-soft:    rgba(255, 255, 255, 0.04);
  --theme-accent-soft-2:  rgba(255, 255, 255, 0.08);
  --theme-cta-text:       #000000;
  --theme-sky:            #ffffff;
  --theme-font-sans:      'Playfair Display', Georgia, 'Times New Roman', serif;
}

[data-theme="rosegold-luxe"] {
  --theme-surface-canvas: #faf4f0;
  --theme-surface-card: #ffffff;
  --theme-surface-2: #f5ebe4;
  --theme-card-blur: none;
  --theme-card-border: 1px solid rgba(210, 184, 163, 0.5);
  --theme-border-color: #d2b8a3;
  --theme-border-strong-color: #b99c86;
  --theme-card-radius: 14px;
  --theme-text-primary: #2a1f17;
  --theme-text-muted: #5c4a3d;
  --theme-text-hint: #8c7667;
  --theme-accent: #e07a5f;
  --theme-accent-soft: rgba(224,122,95,0.12);
  --theme-accent-soft-2: rgba(224,122,95,0.22);
  --theme-cta-text: #ffffff;
  --theme-sky: #e07a5f;
  --theme-font-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

[data-theme="candy-pastel"] {
  --theme-surface-canvas: #fff5f8;
  --theme-surface-card: #ffffff;
  --theme-surface-2: #ffe4ec;
  --theme-card-blur: none;
  --theme-card-border: 1px solid rgba(255, 179, 193, 0.6);
  --theme-border-color: #ffb3c1;
  --theme-border-strong-color: #ff99a8;
  --theme-card-radius: 14px;
  --theme-text-primary: #3d0c1e;
  --theme-text-muted: #6b2d43;
  --theme-text-hint: #99556e;
  --theme-accent: #ff6f91;
  --theme-accent-soft: rgba(255,111,145,0.12);
  --theme-accent-soft-2: rgba(255,111,145,0.22);
  --theme-cta-text: #ffffff;
  --theme-sky: #ff6f91;
  --theme-font-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

[data-theme="fit-neon"] {
  --theme-surface-canvas: #0d0f1a;
  --theme-surface-card: #1a1e2f;
  --theme-surface-2: #262c44;
  --theme-card-blur: none;
  --theme-card-border: 1px solid #394277;
  --theme-border-color: #394277;
  --theme-border-strong-color: #4e5bbf;
  --theme-card-radius: 14px;
  --theme-text-primary: #e0f0ff;
  --theme-text-muted: #a0c8ff;
  --theme-text-hint: #70a0ff;
  --theme-accent: #00e5ff;
  --theme-accent-soft: rgba(0,229,255,0.12);
  --theme-accent-soft-2: rgba(0,229,255,0.22);
  --theme-cta-text: #000000;
  --theme-sky: #00c5ff;
  --theme-font-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

[data-theme="zen-earth"] {
  --theme-surface-canvas: #f7f1e9;
  --theme-surface-card: #ffffff;
  --theme-surface-2: #ebdcd0;
  --theme-card-blur: none;
  --theme-card-border: 1px solid rgba(185, 156, 134, 0.5);
  --theme-border-color: #b99c86;
  --theme-border-strong-color: #a28573;
  --theme-card-radius: 14px;
  --theme-text-primary: #2b2118;
  --theme-text-muted: #524235;
  --theme-text-hint: #7d6958;
  --theme-accent: #6b8e23;
  --theme-accent-soft: rgba(107,142,35,0.12);
  --theme-accent-soft-2: rgba(107,142,35,0.22);
  --theme-cta-text: #ffffff;
  --theme-sky: #6b8e23;
  --theme-font-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

[data-theme="mocha-mist"] {
  --theme-surface-canvas: #2e2a24;
  --theme-surface-card: #35302a;
  --theme-surface-2: #4a453e;
  --theme-card-blur: none;
  --theme-card-border: 1px solid #5f5b53;
  --theme-border-color: #5f5b53;
  --theme-border-strong-color: #77736a;
  --theme-card-radius: 14px;
  --theme-text-primary: #ffffff;
  --theme-text-muted: #d8d2c7;
  --theme-text-hint: #b0a99c;
  --theme-accent: #d2691e;
  --theme-accent-soft: rgba(210,105,30,0.12);
  --theme-accent-soft-2: rgba(210,105,30,0.22);
  --theme-cta-text: #ffffff;
  --theme-sky: #bfb8a9;
  --theme-font-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* === Component layer (sem DTCG aliases — só sobrescreve o que tokens.css fez) === */

/* DEFAULT: redefinir os tokens do tokens.css para o bio */
:root {
  --color-bg:                  var(--theme-surface-canvas);
  --color-surface:             var(--theme-surface-card);
  --color-surface-2:           var(--theme-surface-2);
  --color-border:              var(--theme-border-color);
  --color-text:                var(--theme-text-primary);
  --color-text-muted:          var(--theme-text-muted);
  --color-text-hint:           var(--theme-text-hint);
  --color-accent:              var(--theme-accent);
  --color-accent-soft:         var(--theme-accent-soft);
  --color-accent-soft-2:       var(--theme-accent-soft-2);
  --color-sky:                 var(--theme-sky);
  --font-sans:                 var(--theme-font-sans);
}

/* === Usage layer — nomes curtos que o template consome ===
   O template (<style> inline) usa --bg/--surface/--border/--text/--accent etc.
   Antes deste bloco esses nomes só existiam dentro dos arquivos themes/*.css
   (hoje deslinkados) — sem definição, `background: var(--bg)` caía como
   inválido e o body ficava transparente = FUNDO BRANCO. Esta camada é a ponte. */
:root {
  --bg:             var(--theme-surface-canvas);
  --surface:        var(--theme-surface-card);
  --surface-2:      var(--theme-surface-2);
  --border:         var(--theme-border-color);
  --border-strong:  var(--theme-border-strong-color);
  --text:           var(--theme-text-primary);
  --text-muted:     var(--theme-text-muted);
  --text-hint:      var(--theme-text-hint);
  --accent:         var(--theme-accent);
  --accent-soft:    var(--theme-accent-soft);
  --accent-soft-2:  var(--theme-accent-soft-2);
  --cta-text:       var(--theme-cta-text, #000000);
  --cta-bg:         var(--theme-cta-bg, var(--theme-accent));
  --cta-border:     var(--theme-cta-border, none);
  --cta-color:      var(--theme-cta-color, var(--cta-text));
  --cta-shadow:     var(--theme-cta-shadow, none);
  --cta-padding:    var(--theme-cta-padding, 0.875rem 1rem);
  --radius-btn:     var(--theme-radius-btn, 1rem);
  --radius-badge:   var(--theme-radius-badge, 9999px);
  --card-bg:        var(--surface);
  --card-blur:      var(--theme-card-blur, blur(12px));
  --card-border:    var(--theme-card-border, 1px solid var(--theme-border-color));
  --card-shadow:    var(--theme-card-shadow, none);
  --card-padding:   var(--theme-card-padding, 1rem);
  --radius-card:    var(--theme-card-radius, 1rem);
  --list-gap:       var(--theme-list-gap, 0.75rem);
  --sky:            var(--theme-sky);
  --font-sans:      var(--theme-font-sans);
}