/* =============================================
   Portal da Consciência — Design Tokens Globais
   Identidade: Espiritualidade sofisticada
   Estilo: Minimalista espiritual com geometria sagrada
   ============================================= */

/* ─── Google Fonts ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ─── Tema claro — interface do portal ─────── */
:root {
  /* Cores de fundo */
  --bg-primary:      #faf7f2;
  --bg-surface:      #f5f0e8;
  --bg-surface-alt:  #ede8dc;

  /* Dourado — cor primária */
  --gold:            #c9a054;
  --gold-light:      #e8c97a;
  --gold-muted:      rgba(201, 160, 84, 0.35);
  --gold-subtle:     rgba(201, 160, 84, 0.12);

  /* Texto */
  --text-primary:    #2c1f0e;
  --text-muted:      rgba(44, 31, 14, 0.5);
  --text-faint:      rgba(44, 31, 14, 0.3);

  /* Bordas */
  --border-default:  rgba(201, 160, 84, 0.35);
  --border-active:   #c9a054;
  --border-subtle:   rgba(44, 31, 14, 0.12);

  /* Tipografia */
  --font-display:    'Cinzel', Georgia, serif;
  --font-body:       'Cormorant Garamond', Georgia, serif;

  /* Geometria */
  --radius:          2px;
  --radius-sm:       1px;
  --radius-lg:       4px;

  /* Espaçamento base */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        40px;
  --space-2xl:       64px;

  /* Transições */
  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  /* Sombras */
  --shadow-sm:   0 1px 4px rgba(44, 31, 14, 0.06);
  --shadow-md:   0 2px 12px rgba(44, 31, 14, 0.08);
  --shadow-gold: 0 0 20px rgba(201, 160, 84, 0.15);
}

/* ─── Tema escuro ────────────────────────────── */
:root [data-theme="dark"] {
  --bg-primary:   #0b0e2a;
  --bg-surface:   #111535;
  --gold:         #c9a054;
  --gold-light:   #e8c97a;
  --text-primary: #f0ead8;
  --text-muted:   rgba(240, 234, 216, 0.5);
}

/* ─── Reset base ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ─── Tipografia base ────────────────────── */
.pdc-display {
  font-family:    var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight:    400;
}

.pdc-body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
}

/* ─── Elementos ornamentais ─────────────── */

.pdc-divider {
  width:      60px;
  height:     1px;
  background: var(--gold-muted);
  margin:     var(--space-lg) auto;
}

/* Badge / pill genérico — contraste aumentado */
.pdc-pill {
  display:        inline-flex;
  align-items:    center;
  border:         1px solid var(--border-default);
  border-radius:  var(--radius);
  font-family:    var(--font-display);
  font-size:      0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        6px 14px;
  color:          var(--text-primary);
  opacity:        0.75;
  background:     transparent;
  cursor:         pointer;
  transition:     all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.pdc-pill.ativo,
.pdc-pill:focus {
  border-color: var(--gold);
  color:        var(--gold);
  background:   var(--gold-subtle);
  opacity:      1;
}

/* Botão primário */
.pdc-btn-primary {
  display:        block;
  width:          100%;
  background:     transparent;
  border:         1px solid var(--gold);
  border-radius:  var(--radius);
  color:          var(--gold);
  cursor:         pointer;
  font-family:    var(--font-display);
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        16px 32px;
  min-height:     52px;
  transition:     all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.pdc-btn-primary:hover,
.pdc-btn-primary:focus {
  background: var(--gold-subtle);
  box-shadow: var(--shadow-gold);
}

.pdc-btn-primary:active {
  background: rgba(201, 160, 84, 0.2);
}

.pdc-btn-primary:disabled {
  border-color: var(--border-default);
  color:        var(--text-faint);
  cursor:       not-allowed;
  box-shadow:   none;
}

/* Botão secundário — contraste aumentado */
.pdc-btn-secondary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius);
  color:           var(--text-primary);
  opacity:         0.65;
  cursor:          pointer;
  font-family:     var(--font-display);
  font-size:       0.7rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         12px 24px;
  min-height:      44px;
  transition:      all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.pdc-btn-secondary:hover {
  border-color: var(--gold-muted);
  color:        var(--text-primary);
  opacity:      1;
}

/* Input base */
.pdc-input {
  background:         var(--bg-surface);
  border:             1px solid var(--border-default);
  border-radius:      var(--radius);
  color:              var(--text-primary);
  font-family:        var(--font-body);
  font-size:          1rem;
  font-weight:        300;
  padding:            10px 14px;
  width:              100%;
  outline:            none;
  transition:         border-color var(--transition);
  -webkit-appearance: none;
}

.pdc-input:focus {
  border-color: var(--gold);
}

.pdc-input::placeholder {
  color: var(--text-faint);
}

/* ─── Ornamento SVG ─────────────────────── */
.pdc-ornamento {
  display:      block;
  margin:       0 auto;
  opacity:      0.25;
  fill:         none;
  stroke:       var(--gold);
  stroke-width: 0.5;
}