/* ========================================================================
   global.css — Design System "Velvet Memory" (CSS puro)
   ======================================================================== */

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

/* --- Variáveis CSS — Paleta Velvet Memory --- */
:root {
  /* Cores */
  --background:                #fff8f7;
  --on-background:             #221919;
  --surface:                   #fff8f7;
  --surface-dim:               #e7d6d6;
  --surface-bright:            #fff8f7;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #fff0f0;
  --surface-container:         #fceae9;
  --surface-container-high:    #f6e4e4;
  --surface-container-highest: #f0dfde;
  --surface-variant:           #f0dfde;
  --surface-tint:              #80515c;
  --on-surface:                #221919;
  --on-surface-variant:        #504446;
  --inverse-surface:           #382e2e;
  --inverse-on-surface:        #feedec;
  --outline:                   #837376;
  --outline-variant:           #d4c2c4;
  --primary:                   #80515c;
  --on-primary:                #ffffff;
  --primary-container:         #f4b8c4;
  --on-primary-container:      #32101a;
  --primary-fixed:             #ffd9e0;
  --primary-fixed-dim:         #f3b7c3;
  --on-primary-fixed:          #32101a;
  --on-primary-fixed-variant:  #653a44;
  --inverse-primary:           #f3b7c3;
  --secondary:                 #a23c3f;
  --on-secondary:              #ffffff;
  --secondary-container:       #ffdad8;
  --on-secondary-container:    #410007;
  --tertiary:                  #615e57;
  --on-tertiary:               #ffffff;
  --tertiary-container:        #ccc7bf;
  --on-tertiary-container:     #56534c;
  --error:                     #ba1a1a;
  --on-error:                  #ffffff;
  --error-container:           #ffdad6;
  --on-error-container:        #93000a;

  /* Espaçamentos */
  --spacing-xs:          4px;
  --spacing-sm:          12px;
  --spacing-base:        8px;
  --spacing-md:          24px;
  --spacing-lg:          40px;
  --spacing-xl:          64px;
  --container-padding:   24px;
  --grid-gutter:         16px;

  /* Raios de borda */
  --radius-sm:   0.25rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;
}

/* --- Tipografia base --- */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100dvh;
  background-color: var(--background);
  color: var(--on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ========================================================================
   Classes utilitárias de COR
   ======================================================================== */
.bg-background              { background-color: var(--background); }
.bg-surface                 { background-color: var(--surface); }
.bg-surface-container       { background-color: var(--surface-container); }
.bg-surface-container-low   { background-color: var(--surface-container-low); }
.bg-surface-container-high  { background-color: var(--surface-container-high); }
.bg-surface-container-lowest  { background-color: var(--surface-container-lowest); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-primary                 { background-color: var(--primary); }
.bg-primary-container       { background-color: var(--primary-container); }
.bg-secondary-container     { background-color: var(--secondary-container); }
.bg-white                   { background-color: #ffffff; }

.text-primary               { color: var(--primary); }
.text-secondary             { color: var(--secondary); }
.text-on-primary            { color: var(--on-primary); }
.text-on-background         { color: var(--on-background); }
.text-on-surface            { color: var(--on-surface); }
.text-on-surface-variant    { color: var(--on-surface-variant); }
.text-on-primary-container  { color: var(--on-primary-container); }
.text-on-primary-fixed-variant { color: var(--on-primary-fixed-variant); }
.text-outline               { color: var(--outline); }

.border-outline             { border-color: var(--outline); }
.border-primary             { border-color: var(--primary); }
.border-primary-container   { border-color: var(--primary-container); }
.border-secondary           { border-color: var(--secondary); }
.border-surface-variant     { border-color: var(--surface-variant); }

/* ========================================================================
   Classes utilitárias de LAYOUT
   ======================================================================== */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-row   { flex-direction: row; }
.flex-1     { flex: 1; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.w-full     { width: 100%; }
.h-full     { height: 100%; }
.min-h-screen { min-height: 100vh; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.fixed      { position: fixed; }
.inset-0    { inset: 0; }
.z-10       { z-index: 10; }
.z-20       { z-index: 20; }
.z-50       { z-index: 50; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block      { display: block; }
.inline-block { display: inline-block; }
.text-center { text-align: center; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ========================================================================
   Classes utilitárias de ESPAÇAMENTO
   ======================================================================== */
.p-xs  { padding: var(--spacing-xs); }
.p-sm  { padding: var(--spacing-sm); }
.p-md  { padding: var(--spacing-md); }
.p-lg  { padding: var(--spacing-lg); }
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mt-auto { margin-top: auto; }
.gap-xs  { gap: var(--spacing-xs); }
.gap-sm  { gap: var(--spacing-sm); }
.gap-md  { gap: var(--spacing-md); }
.gap-base { gap: var(--spacing-base); }
.gap-grid-gutter { gap: var(--grid-gutter); }

/* ========================================================================
   Classes utilitárias de TIPOGRAFIA
   ======================================================================== */
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.italic        { font-style: italic; }
.uppercase     { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }

/* ========================================================================
   Classes utilitárias de BORDA e SOMBRA
   ======================================================================== */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.border       { border: 1px solid; }
.shadow-sm    { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md    { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg    { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl    { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

/* ========================================================================
   Classes utilitárias de GRID
   ======================================================================== */
.grid         { display: grid; }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }

/* ========================================================================
   Classes especiais do design system
   ======================================================================== */
.soft-glow {
  box-shadow: 0 10px 30px -5px rgba(162, 60, 63, 0.15);
}

/* Seleção de texto com cores da paleta */
::selection {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

/* Transições padrão */
.transition-all     { transition: all 0.2s ease; }
.transition-colors  { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }

/* Aspect ratio */
.aspect-square { aspect-ratio: 1 / 1; }

/* Específicos que o Tailwind gerava e precisamos no CSS puro */
.object-cover { object-fit: cover; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }

/* Backdrop blur (navegação) */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ========================================================================
   Barra de navegação inferior (componente global)
   ======================================================================== */
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 32px 24px;
  background-color: rgba(255, 248, 247, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(131, 115, 118, 0.3);
  box-shadow: 0 -4px 20px rgba(122, 79, 109, 0.08);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 12px;
  transition: all 0.2s ease;
  color: rgba(128, 81, 92, 0.4);
}

.nav-item:hover {
  background-color: rgba(128, 81, 92, 0.1);
}

.nav-item-active {
  background-color: rgba(128, 81, 92, 0.2);
  color: var(--primary);
  transform: scale(1.1);
}