/* ──────────────────────────────────────────────────────────────────
   INSPIRA · Design Tokens (VELART)
   Marca: dourado/bronze sobre ônix
   Tipografia: Fraunces (display) + Inter (UI) + JetBrains Mono (data)
   Portado de Claude Design → aplicado sobre Bootstrap 5.3
   ────────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* Surfaces — warm-tinted ink */
  --bg-base:        #0e0c08;
  --bg-app:         #131009;
  --bg-elev-1:      #1a160f;
  --bg-elev-2:      #221c13;
  --bg-card:        #1c1810;
  --bg-input:       #15110a;
  --bg-hover:       #221c12;
  --bg-active:      #2a2418;

  /* Borders */
  --border:         #2b2418;
  --border-soft:    #1f1a11;
  --border-strong:  #3a3120;
  --border-gold:    #5a4527;

  /* Text */
  --text:           #f4ede0;
  --text-strong:    #ffffff;
  --text-secondary: #a89c84;
  --text-muted:     #6f6650;
  --text-disabled:  #4a4434;
  --text-on-gold:   #14110a;

  /* Brand — VELART dourado */
  --gold-deep:      #86643E;
  --gold:           #BC9565;
  --gold-light:     #F2C68C;
  --gold-pale:      #f4dab2;
  --gold-faint:     rgba(188, 149, 101, 0.08);
  --gold-glow:      rgba(242, 198, 140, 0.18);
  --gradient-gold:  linear-gradient(135deg, #86643E 0%, #BC9565 45%, #F2C68C 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(134,100,62,0.12) 0%, rgba(188,149,101,0.12) 50%, rgba(242,198,140,0.18) 100%);

  /* Semantic */
  --success:        #6da55a;
  --success-bg:     rgba(109, 165, 90, 0.12);
  --warning:        #d4a72c;
  --warning-bg:     rgba(212, 167, 44, 0.13);
  --danger:         #c95757;
  --danger-bg:      rgba(201, 87, 87, 0.13);
  --info:           #6c9fc4;
  --info-bg:        rgba(108, 159, 196, 0.13);

  /* Effects */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.5);
  --shadow-gold:    0 12px 40px rgba(134, 100, 62, 0.22);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-base:        #f5f0e6;
  --bg-app:         #faf6ec;
  --bg-elev-1:      #ffffff;
  --bg-elev-2:      #fdf9ef;
  --bg-card:        #ffffff;
  --bg-input:       #ffffff;
  --bg-hover:       #f0e9d8;
  --bg-active:      #e8dec5;

  --border:         #e2d9c2;
  --border-soft:    #ede5cf;
  --border-strong:  #c9bd9d;
  --border-gold:    #BC9565;

  --text:           #1c1810;
  --text-strong:    #0e0c08;
  --text-secondary: #5a513a;
  --text-muted:     #877c5e;
  --text-disabled:  #b5ad95;
  --text-on-gold:   #14110a;

  --gold-deep:      #86643E;
  --gold:           #9e7740;
  --gold-light:     #BC9565;
  --gold-pale:      #f0d7a8;
  --gold-faint:     rgba(134, 100, 62, 0.08);
  --gold-glow:      rgba(134, 100, 62, 0.15);
  --gradient-gold:  linear-gradient(135deg, #86643E 0%, #BC9565 45%, #F2C68C 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(134,100,62,0.05) 0%, rgba(242,198,140,0.10) 100%);

  --success:        #4a8a3a;
  --success-bg:     rgba(74, 138, 58, 0.10);
  --warning:        #a87a0c;
  --warning-bg:     rgba(168, 122, 12, 0.12);
  --danger:         #b03d3d;
  --danger-bg:      rgba(176, 61, 61, 0.10);
  --info:           #3d7aa8;
  --info-bg:        rgba(61, 122, 168, 0.10);

  --shadow-sm:      0 1px 2px rgba(60, 40, 10, 0.06);
  --shadow-md:      0 4px 12px rgba(60, 40, 10, 0.08);
  --shadow-lg:      0 12px 40px rgba(60, 40, 10, 0.12);
  --shadow-gold:    0 12px 40px rgba(134, 100, 62, 0.18);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.6);

  color-scheme: light;
}

/* Typography utilities */
.font-display {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.02em;
}
.font-mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-feature-settings: 'tnum', 'zero';
}
.tnum { font-variant-numeric: tabular-nums; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* Selection */
::selection { background: var(--gold); color: var(--text-on-gold); }