/* ============================================================
   iGod — Design Tokens
   Cor primária: Ameixa profunda (sofisticado, confiável)
   Spark de marca: Brasa #E8712A (energia, ação, calor cristão)
   Fundo: Creme quente (papel, hospitalidade)
   ============================================================ */

:root {
  /* ---------- COR — Plum (primário dominante) ---------- */
  --plum-50:  #F7F2F7;
  --plum-100: #EDE2EE;
  --plum-200: #D6C2DA;
  --plum-300: #B597BC;
  --plum-400: #8B6892;
  --plum-500: #65466D;
  --plum-600: #4A2F52;
  --plum-700: #36213D;
  --plum-800: #2A1B2E; /* base */
  --plum-900: #1A0F1D;

  /* ---------- COR — Brasa (laranja brand, ação) ---------- */
  --ember-50:  #FEF4ED;
  --ember-100: #FDE5D2;
  --ember-200: #FBC79F;
  --ember-300: #F8A267;
  --ember-400: #F08544;
  --ember-500: #E8712A; /* marca */
  --ember-600: #C95A1B;
  --ember-700: #A14716;
  --ember-800: #7B3613;
  --ember-900: #5C2810;

  /* ---------- COR — Areia (creme / fundos) ---------- */
  --sand-50:  #FFFCF6;
  --sand-100: #FAF6EE;
  --sand-200: #F2EBDD;
  --sand-300: #E6DBC3;
  --sand-400: #D2C19E;

  /* ---------- COR — Neutros warm (texto, bordas) ---------- */
  --neutral-50:  #FAF8F5;
  --neutral-100: #F1EEE9;
  --neutral-200: #E1DCD3;
  --neutral-300: #C9C2B6;
  --neutral-400: #9B9389;
  --neutral-500: #6D6760;
  --neutral-600: #4D4944;
  --neutral-700: #36332F;
  --neutral-800: #211F1D;
  --neutral-900: #100F0E;

  /* ---------- COR — Semânticas ---------- */
  --success-50:  #E8F3EC;
  --success-500: #2D7A4F;
  --success-700: #1F5736;

  --warning-50:  #FBF1DE;
  --warning-500: #C88A1F;
  --warning-700: #8A5E12;

  --error-50:    #F8E3E3;
  --error-500:   #B83A3A;
  --error-700:   #832424;

  --info-50:     #E3ECF3;
  --info-500:    #2C5F87;
  --info-700:    #1B405E;

  /* ---------- ALIASES — Semantic Surfaces ---------- */
  --bg:           var(--sand-100);
  --bg-elevated:  #FFFFFF;
  --bg-inverse:   var(--plum-800);
  --bg-deep:      var(--plum-900);

  --fg-primary:   var(--neutral-900);
  --fg-secondary: var(--neutral-600);
  --fg-muted:     var(--neutral-400);
  --fg-on-dark:   var(--sand-50);
  --fg-on-dark-muted: rgba(255,252,246,.7);

  --hairline:     rgba(33, 31, 29, .08);
  --hairline-strong: rgba(33, 31, 29, .14);
  --hairline-on-dark: rgba(255,252,246,.12);

  --accent:       var(--ember-500);
  --accent-press: var(--ember-600);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Escala — mobile-first, modular */
  --fs-display-xl: 56px;
  --fs-display-lg: 44px;
  --fs-h1:         32px;
  --fs-h2:         26px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-label:      11px; /* uppercase eyebrow */

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  --tracking-tight:    -0.02em;
  --tracking-display:  -0.025em;
  --tracking-eyebrow:   0.12em;

  /* ---------- ESPAÇAMENTO — base 4px ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- RAIOS ---------- */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-flat:    none;
  --shadow-low:     0 1px 2px rgba(33, 31, 29, .06);
  --shadow-md:      0 4px 12px -2px rgba(33, 31, 29, .10), 0 2px 4px -2px rgba(33, 31, 29, .06);
  --shadow-high:    0 12px 32px -8px rgba(33, 31, 29, .16), 0 4px 8px -2px rgba(33, 31, 29, .06);
  --shadow-overlay: 0 24px 64px -16px rgba(26, 15, 29, .28), 0 8px 16px -4px rgba(33, 31, 29, .12);
  --shadow-focus:   0 0 0 3px rgba(232, 113, 42, .28);
  --shadow-inset:   inset 0 0 0 1px var(--hairline);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --ease-in:    cubic-bezier(.4,0,.6,.4);
  --ease-spring:cubic-bezier(.34,1.3,.64,1);

  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --gutter:       24px;
  --gutter-mobile:16px;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--neutral-900);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--ember-200); color: var(--neutral-900); }

/* Utilitários */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ember-600);
}

.mono { font-family: var(--font-mono); font-size: 13px; }