/* =============================================================================
   MEMORIAL FAMILIAR DIGITAL — themes.css
   V22 — Fonte única de verdade para tokens de design
   Todos os temas definem os mesmos tokens; o layout nunca usa valor fixo de cor.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TOKENS GLOBAIS (não mudam por tema)
   ----------------------------------------------------------------------------- */
:root {
  /* Tipografia */
  --font-sans:    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   Georgia, "Times New Roman", serif;

  /* Raios */
  --radius-xs:    8px;
  --radius-sm:    14px;
  --radius-md:    18px;
  --radius-lg:    22px;
  --radius-xl:    30px;
  --radius-card:  var(--radius-lg);
  --radius-badge: 999px;
  --radius-modal: var(--radius-lg);

  /* Espaçamentos */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     40px;
  --space-card:   var(--space-md);

  /* Transições */
  --transition-fast:   120ms ease;
  --transition-normal: 220ms ease;
  --transition-slow:   360ms ease;

  /* Z-index */
  --z-modal:    1000;
  --z-dropdown: 900;
  --z-tooltip:  800;
  --z-header:   700;
}

/* -----------------------------------------------------------------------------
   TEMA PADRÃO / CLARO
   (também serve como fallback se nenhum data-theme for aplicado)
   ----------------------------------------------------------------------------- */
:root,
html[data-theme="claro"] {
  --font: var(--font-sans);

  /* Fundos */
  --bg:              #f7fbff;
  --bg-start:        #ffffff;
  --bg-mid:          #f4f8fc;
  --bg-end:          #ffffff;
  --bg-orb:          rgba(14, 90, 138, .10);
  --surface:         #ffffff;
  --surface-2:       #f7fbff;
  --surface-card:    #ffffff;
  --surface-panel:   #f0f6fc;
  --surface-input:   #ffffff;

  /* Textos */
  --text:            #10243d;
  --text-muted:      #5f7288;
  --text-inverse:    #ffffff;
  --text-heading:    #0d1f36;

  /* Cor primária */
  --primary:         #0e5a8a;
  --primary-strong:  #0a3f63;
  --primary-soft:    #e5f3fb;
  --primary-text:    #ffffff;

  /* Bordas */
  --border:          #d7e4ef;
  --border-soft:     rgba(14, 90, 138, .12);
  --border-card:     rgba(14, 90, 138, .10);
  --border-input:    #c4d6e8;

  /* Sombras */
  --shadow:          0 20px 50px rgba(16, 36, 61, .12);
  --shadow-card:     0 4px 16px rgba(16, 36, 61, .08);
  --shadow-soft:     0 2px 8px  rgba(16, 36, 61, .06);
  --shadow-modal:    0 24px 64px rgba(16, 36, 61, .18);

  /* Estados */
  --danger:          #9c2f25;
  --danger-soft:     #fdecea;
  --success:         #2d6a4f;
  --success-soft:    #eaf6ef;
  --warning:         #8a6d0a;
  --warning-soft:    #fff8d6;
}

/* -----------------------------------------------------------------------------
   TEMA ESCURO
   ----------------------------------------------------------------------------- */
html[data-theme="escuro"] {
  color-scheme: dark;
  --font: var(--font-sans);

  /* Fundos */
  --bg:              #081421;
  --bg-start:        #07111d;
  --bg-mid:          #0b1d2f;
  --bg-end:          #081421;
  --bg-orb:          rgba(53, 182, 230, .18);
  --surface:         #111f30;
  --surface-2:       #162a40;
  --surface-card:    #132234;
  --surface-panel:   rgba(7, 18, 26, .94);
  --surface-input:   #1a2f45;

  /* Textos */
  --text:            #eef7ff;
  --text-muted:      #a9bfd4;
  --text-inverse:    #081421;
  --text-heading:    #ffffff;

  /* Cor primária */
  --primary:         #35b6e6;
  --primary-strong:  #7ad8ff;
  --primary-soft:    rgba(53, 182, 230, .16);
  --primary-text:    #081421;

  /* Bordas */
  --border:          rgba(178, 214, 238, .18);
  --border-soft:     rgba(178, 214, 238, .10);
  --border-card:     rgba(178, 214, 238, .12);
  --border-input:    rgba(178, 214, 238, .22);

  /* Sombras */
  --shadow:          0 22px 60px rgba(0, 0, 0, .34);
  --shadow-card:     0 4px 20px rgba(0, 0, 0, .28);
  --shadow-soft:     0 2px 10px rgba(0, 0, 0, .22);
  --shadow-modal:    0 28px 72px rgba(0, 0, 0, .50);

  /* Estados */
  --danger:          #ff7b70;
  --danger-soft:     rgba(255, 123, 112, .15);
  --success:         #62d69a;
  --success-soft:    rgba(98, 214, 154, .15);
  --warning:         #f0c040;
  --warning-soft:    rgba(240, 192, 64, .15);
}

/* -----------------------------------------------------------------------------
   TEMA SÉPIA
   ----------------------------------------------------------------------------- */
html[data-theme="sepia"] {
  --font: var(--font-sans);

  /* Fundos */
  --bg:              #f7eedf;
  --bg-start:        #fff8ed;
  --bg-mid:          #f3e2ca;
  --bg-end:          #fffaf2;
  --bg-orb:          rgba(139, 94, 52, .16);
  --surface:         #fff8ed;
  --surface-2:       #fbeedd;
  --surface-card:    #fffaf4;
  --surface-panel:   #f5e8d0;
  --surface-input:   #fff8ed;

  /* Textos */
  --text:            #382819;
  --text-muted:      #806f5c;
  --text-inverse:    #ffffff;
  --text-heading:    #2a1c0e;

  /* Cor primária */
  --primary:         #8b5e34;
  --primary-strong:  #5f3a1c;
  --primary-soft:    #ead7bc;
  --primary-text:    #ffffff;

  /* Bordas */
  --border:          #dfc8aa;
  --border-soft:     rgba(139, 94, 52, .14);
  --border-card:     rgba(139, 94, 52, .12);
  --border-input:    #d0b08a;

  /* Sombras */
  --shadow:          0 20px 50px rgba(70, 43, 20, .14);
  --shadow-card:     0 4px 16px rgba(70, 43, 20, .10);
  --shadow-soft:     0 2px 8px  rgba(70, 43, 20, .08);
  --shadow-modal:    0 24px 64px rgba(70, 43, 20, .22);

  /* Estados */
  --danger:          #a03020;
  --danger-soft:     #faeae6;
  --success:         #3a6b3e;
  --success-soft:    #eaf4eb;
  --warning:         #8a6d0a;
  --warning-soft:    #fdf4d0;
}

/* -----------------------------------------------------------------------------
   TEMA PERGAMINHO
   ----------------------------------------------------------------------------- */
html[data-theme="pergaminho"] {
  --font: var(--font-serif);

  /* Fundos */
  --bg:              #efe2c8;
  --bg-start:        #f7ead0;
  --bg-mid:          #ead4ad;
  --bg-end:          #fff3dc;
  --bg-orb:          rgba(118, 69, 30, .18);
  --surface:         #fff3dc;
  --surface-2:       #f7e6c5;
  --surface-card:    #fffaee;
  --surface-panel:   #f0e0c0;
  --surface-input:   #fff8ec;

  /* Textos */
  --text:            #321f10;
  --text-muted:      #7a6346;
  --text-inverse:    #ffffff;
  --text-heading:    #1e1208;

  /* Cor primária */
  --primary:         #76451e;
  --primary-strong:  #4a2a12;
  --primary-soft:    #e8cfa7;
  --primary-text:    #ffffff;

  /* Bordas */
  --border:          #d7b985;
  --border-soft:     rgba(118, 69, 30, .16);
  --border-card:     rgba(118, 69, 30, .14);
  --border-input:    #c9a86c;

  /* Sombras */
  --shadow:          0 24px 54px rgba(66, 38, 14, .17);
  --shadow-card:     0 4px 18px rgba(66, 38, 14, .12);
  --shadow-soft:     0 2px 8px  rgba(66, 38, 14, .10);
  --shadow-modal:    0 26px 68px rgba(66, 38, 14, .26);

  /* Estados */
  --danger:          #9c2a18;
  --danger-soft:     #faeae4;
  --success:         #2e5e32;
  --success-soft:    #eaf2eb;
  --warning:         #7a5f08;
  --warning-soft:    #fdf3d0;
}

/* -----------------------------------------------------------------------------
   TOKENS COMPOSTOS — calculados a partir dos tokens acima
   (valem para todos os temas; nunca precisam ser redefinidos por tema)
   ----------------------------------------------------------------------------- */
:root,
html[data-theme="claro"],
html[data-theme="escuro"],
html[data-theme="sepia"],
html[data-theme="pergaminho"] {
  /* Card */
  --card-bg:         var(--surface-card);
  --card-border:     var(--border-card);
  --card-shadow:     var(--shadow-card);
  --card-radius:     var(--radius-card);
  --card-padding:    var(--space-card);

  /* Badge */
  --badge-radius:    var(--radius-badge);
  --badge-padding:   2px 10px;
  --badge-font-size: 0.75rem;
  --badge-font-weight: 700;

  /* Modal */
  --modal-radius:    var(--radius-modal);
  --modal-shadow:    var(--shadow-modal);
  --modal-bg:        var(--surface);
  --modal-border:    var(--border-soft);
  --modal-padding:   var(--space-xl);

  /* Input */
  --input-bg:        var(--surface-input);
  --input-border:    var(--border-input);
  --input-radius:    var(--radius-sm);
  --input-padding:   10px 14px;
  --input-text:      var(--text);
}

/* =============================================================================
   TOKENS DO FAMILYCARD — V22 Fase 2.1
   Cada tema define os valores; family-card.css usa só var(--fc-*)
   ============================================================================= */

/* Tema padrão / claro */
:root,
html[data-theme="claro"] {
  --fc-bg:           linear-gradient(180deg, #f4e7c6 0%, #f2dfb1 26%, #f7e8c9 52%, #e8cd92 100%);
  --fc-bg-radial-1:  rgba(255,255,255,.38);
  --fc-bg-radial-2:  rgba(166,121,49,.10);
  --fc-bg-radial-3:  rgba(140,92,32,.08);
  --fc-bg-line:      rgba(109,74,29,.018);
  --fc-border-inner: rgba(150,108,49,.20);
  --fc-shadow:       0 16px 30px rgba(90,62,25,.13);
  --fc-shadow-ring:  rgba(139,96,36,.22);
  --fc-shadow-top:   rgba(255,255,255,.44);
  --fc-shadow-bot:   rgba(128,89,32,.06);
  --fc-overlay-h:    rgba(128,88,31,.18);
  --fc-overlay-v:    rgba(123,85,32,.10);
  --fc-photo-border: rgba(255,251,241,.95);
  --fc-photo-shadow: rgba(92,62,24,.14);
  --fc-text-name:    #382211;
  --fc-text-meta:    #6d5234;
  --fc-text-detail:  #6d5234;
  --fc-badge-bg:     rgba(255,247,230,.76);
  --fc-badge-border: rgba(161,121,66,.24);
  --fc-badge-text:   #624726;
  --fc-badge-shadow: rgba(255,255,255,.48);
  --fc-hover-shadow: 0 20px 36px rgba(90,62,25,.16);
  --fc-hover-ring:   rgba(139,96,36,.24);
  --fc-placeholder-photo: linear-gradient(180deg,#fffaf0,#f0dcb1);
  --fc-placeholder-color: #664b2b;
  --fc-deceased-badge-bg:  rgba(244,240,230,.88);
  --fc-deceased-badge-txt: #6a6257;
}

/* Tema escuro */
html[data-theme="escuro"] {
  --fc-bg:           linear-gradient(180deg,#2b4051 0%,#223345 26%,#32485c 52%,#1c2a38 100%);
  --fc-bg-radial-1:  rgba(255,255,255,.06);
  --fc-bg-radial-2:  rgba(70,116,144,.10);
  --fc-bg-radial-3:  transparent;
  --fc-bg-line:      rgba(255,255,255,.015);
  --fc-border-inner: rgba(129,172,200,.16);
  --fc-shadow:       0 16px 30px rgba(0,0,0,.24);
  --fc-shadow-ring:  rgba(129,172,200,.18);
  --fc-shadow-top:   rgba(255,255,255,.04);
  --fc-shadow-bot:   transparent;
  --fc-overlay-h:    rgba(0,0,0,.18);
  --fc-overlay-v:    rgba(0,0,0,.12);
  --fc-photo-border: rgba(255,251,241,.25);
  --fc-photo-shadow: rgba(0,0,0,.28);
  --fc-text-name:    #edf7ff;
  --fc-text-meta:    #c2d8e8;
  --fc-text-detail:  #b8d2e4;
  --fc-badge-bg:     rgba(255,255,255,.05);
  --fc-badge-border: rgba(126,168,194,.18);
  --fc-badge-text:   #c2d8e8;
  --fc-badge-shadow: rgba(255,255,255,.02);
  --fc-hover-shadow: 0 20px 36px rgba(0,0,0,.32);
  --fc-hover-ring:   rgba(129,172,200,.28);
  --fc-placeholder-photo: linear-gradient(180deg,#2c4558,#1a2f42);
  --fc-placeholder-color: #c2d8e8;
  --fc-deceased-badge-bg:  rgba(255,255,255,.04);
  --fc-deceased-badge-txt: #8aabb8;
}

/* Tema sépia */
html[data-theme="sepia"] {
  --fc-bg:           linear-gradient(180deg,#f2e4be 0%,#ecd9a4 26%,#f4e5c0 52%,#e3c98a 100%);
  --fc-bg-radial-1:  rgba(255,255,255,.34);
  --fc-bg-radial-2:  rgba(150,105,40,.10);
  --fc-bg-radial-3:  rgba(120,78,24,.08);
  --fc-bg-line:      rgba(95,60,20,.018);
  --fc-border-inner: rgba(130,88,38,.20);
  --fc-shadow:       0 16px 30px rgba(80,52,18,.15);
  --fc-shadow-ring:  rgba(120,78,30,.22);
  --fc-shadow-top:   rgba(255,255,255,.44);
  --fc-shadow-bot:   rgba(108,72,24,.08);
  --fc-overlay-h:    rgba(108,70,22,.18);
  --fc-overlay-v:    rgba(103,66,22,.10);
  --fc-photo-border: rgba(255,248,230,.95);
  --fc-photo-shadow: rgba(80,50,16,.16);
  --fc-text-name:    #2e1a0a;
  --fc-text-meta:    #6a4e2f;
  --fc-text-detail:  #6a4e2f;
  --fc-badge-bg:     rgba(255,244,220,.76);
  --fc-badge-border: rgba(145,105,54,.24);
  --fc-badge-text:   #5a3f1a;
  --fc-badge-shadow: rgba(255,255,255,.48);
  --fc-hover-shadow: 0 20px 36px rgba(80,52,18,.20);
  --fc-hover-ring:   rgba(120,78,30,.28);
  --fc-placeholder-photo: linear-gradient(180deg,#fff8ec,#e8d4a0);
  --fc-placeholder-color: #5e4220;
  --fc-deceased-badge-bg:  rgba(238,232,218,.88);
  --fc-deceased-badge-txt: #6a5e4e;
}

/* Tema pergaminho */
html[data-theme="pergaminho"] {
  --fc-bg:           linear-gradient(180deg,#f4e7c6 0%,#f2dfb1 26%,#f7e8c9 52%,#e8cd92 100%);
  --fc-bg-radial-1:  rgba(255,255,255,.38);
  --fc-bg-radial-2:  rgba(166,121,49,.10);
  --fc-bg-radial-3:  rgba(140,92,32,.08);
  --fc-bg-line:      rgba(109,74,29,.018);
  --fc-border-inner: rgba(150,108,49,.20);
  --fc-shadow:       0 16px 30px rgba(90,62,25,.15);
  --fc-shadow-ring:  rgba(139,96,36,.22);
  --fc-shadow-top:   rgba(255,255,255,.44);
  --fc-shadow-bot:   rgba(128,89,32,.06);
  --fc-overlay-h:    rgba(128,88,31,.18);
  --fc-overlay-v:    rgba(123,85,32,.10);
  --fc-photo-border: rgba(255,251,241,.95);
  --fc-photo-shadow: rgba(92,62,24,.14);
  --fc-text-name:    #321508;
  --fc-text-meta:    #6a4e28;
  --fc-text-detail:  #6a4e28;
  --fc-badge-bg:     rgba(255,247,226,.76);
  --fc-badge-border: rgba(161,121,60,.26);
  --fc-badge-text:   #5c3e18;
  --fc-badge-shadow: rgba(255,255,255,.48);
  --fc-hover-shadow: 0 20px 36px rgba(90,62,25,.18);
  --fc-hover-ring:   rgba(139,96,36,.26);
  --fc-placeholder-photo: linear-gradient(180deg,#fffaf0,#f0dcb1);
  --fc-placeholder-color: #664b2b;
  --fc-deceased-badge-bg:  rgba(244,238,224,.88);
  --fc-deceased-badge-txt: #6e6050;
}