/* ═══════════════════════════════════════
   TOKENS.CSS — Design System v3.0
   CK Estética Avançada
   ═══════════════════════════════════════ */

/* ── Dark Theme (default) ── */
[data-theme="dark"] {
  --bg:              #0B0B0B;
  --bg-2:            #131313;
  --bg-3:            #1A1A1A;
  --bg-4:            #222;
  --text:            #F5F2ED;
  --text-m:          rgba(245,242,237,.6);
  --text-d:          rgba(245,242,237,.4);
  --border:          rgba(245,242,237,.06);
  --gold:            #C8A87C;
  --gold-l:          #E2C9A0;
  --gold-dim:        rgba(200,168,124,.12);
  --gold-glow:       rgba(200,168,124,.06);
  --card-shadow:     0 8px 40px rgba(0,0,0,.3);
  --overlay:         rgba(11,11,11,.92);
  --placeholder-bg:  linear-gradient(135deg, #181614, #2a2018);
  --placeholder-border: rgba(200,168,124,.15);
  --placeholder-text: rgba(200,168,124,.3);
  --invert:          0;
  /* Theme toggle icon: show sun in dark mode */
  --icon-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg:              #FAF8F5;
  --bg-2:            #FFFFFF;
  --bg-3:            #F3F0EB;
  --bg-4:            #EAE6E0;
  --text:            #1A1714;
  --text-m:          rgba(26,23,20,.6);
  --text-d:          rgba(26,23,20,.4);
  --border:          rgba(26,23,20,.08);
  --gold:            #A8894E;
  --gold-l:          #C8A87C;
  --gold-dim:        rgba(168,137,78,.1);
  --gold-glow:       rgba(168,137,78,.05);
  --card-shadow:     0 8px 40px rgba(0,0,0,.06);
  --overlay:         rgba(250,248,245,.95);
  --placeholder-bg:  linear-gradient(135deg, #F0ECE6, #E8E0D4);
  --placeholder-border: rgba(168,137,78,.2);
  --placeholder-text: rgba(168,137,78,.5);
  --invert:          1;
  /* Theme toggle icon: show moon in light mode */
  --icon-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");
}

/* ── Global tokens (não dependem de tema) ── */
:root {
  --wa:      #25D366;
  --danger:  #E74C3C;
  --success: #2ecc71;
  --fd:      'Playfair Display', Georgia, serif;
  --fb:      'DM Sans', system-ui, sans-serif;
  --ease:    cubic-bezier(.22,.61,.36,1);
  --nav-h:   72px;
  --max-w:   1200px;
  --radius:  0px; /* sharp corners = luxury */
}