/* =============================================================================
   MotiCards — Design System web
   Derivado dos tokens do app (src/theme/). Os NOMES semânticos são contrato:
   não renomeie. Valores crus vêm de primitives.ts / palette.ts.

   A linguagem visual é AQUARELA: nada de bordas duras e chapadas. Cor entra
   como lavagem (wash) sobre papel, bordas respiram, camadas se sobrepõem.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens --- */
:root {
  /* ember — marca (claro) */
  --ember-50: #FDF3EA;
  --ember-100: #FAE5D1;
  --ember-200: #F5CBA4;
  --ember-300: #EDA671;
  --ember-400: #E27E40;
  --ember-500: #D2661F;
  --ember-600: #C25213;
  --ember-700: #9F3F0D;
  --ember-800: #7C300B;
  --ember-900: #5E2409;

  /* apricot — marca (escuro) */
  --apricot-200: #F7C9A0;
  --apricot-300: #F2AF78;
  --apricot-400: #EC9455;

  /* cream — neutros claros (marfim) */
  --cream-50: #FFFFFF;
  --cream-100: #FCF9F2;
  --cream-200: #F8F4E9;
  --cream-300: #F1EADA;
  --cream-400: #E6DCC5;
  --cream-500: #D7C9AB;

  /* coal — neutros escuros (cacau) */
  --coal-600: #50473C;
  --coal-700: #443C32;
  --coal-800: #373028;
  --coal-900: #2B2520;

  /* ink — texto (expresso) */
  --ink-100: #F7F2E7;
  --ink-300: #B5A996;
  --ink-500: #6F6151;
  --ink-900: #2E2012;

  /* gold — premium / lendário. NUNCA usar ember no lugar do gold. */
  --gold-200: #F2DCA4;
  --gold-300: #E8C56E;
  --gold-400: #D9A13B;
  --gold-600: #A66F1E;
  --gold-800: #6E4712;

  --green-600: #338A5C;
  --red-600: #D32F2F;

  /* --- semânticos (esquema claro) --- */
  --background: var(--cream-200);
  --surface: var(--cream-50);
  --surface-muted: var(--cream-300);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --primary: var(--ember-600);
  --primary-pressed: var(--ember-700);
  --primary-soft: var(--ember-100);
  --on-primary: #FFFFFF;
  --border: var(--cream-400);

  /* --- raridades (molduras por material) --- */
  --raridade-comum: #8A9099;
  --raridade-incomum: #3FA26E;
  --raridade-raro: #4A7BD8;
  --raridade-lendario: var(--gold-400);
  --foil: linear-gradient(150deg, #8A5A16 0%, var(--gold-200) 50%, #B87F1F 100%);
  --prata: linear-gradient(150deg, #2E4E8F 0%, #A8C4F2 50%, #4A7BD8 100%);

  /* --- temáticas (auras de 3 stops, 165°) --- */
  --tema-trabalho: linear-gradient(165deg, #14284B, #2C4E9C, #5B87E0);
  --tema-familia: linear-gradient(165deg, #7A3B10, #C2701F, #F0A94B);
  --tema-relacionamentos: linear-gradient(165deg, #6E1030, #B33A5B, #E98AA0);
  --tema-fe: linear-gradient(165deg, #241448, #4C3288, #8B6FD4);
  --tema-estudos: linear-gradient(165deg, #06363B, #12707A, #3FB3B8);
  --tema-projetos: linear-gradient(165deg, #14401F, #2E7D3F, #6FC077);

  /* --- métricas (espelham metrics.ts) --- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-card: 26px;
  --r-pill: 999px;

  /* --- tipografia --- */
  --fonte-display: 'Sentient', 'Iowan Old Style', Georgia, serif;
  --fonte-corpo: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* --- movimento --- */
  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-float: cubic-bezier(0.44, 0, 0.56, 1);
}

/* Esquema escuro — cacau + apricot */
[data-theme='dark'] {
  --background: var(--coal-900);
  --surface: var(--coal-800);
  --surface-muted: var(--coal-700);
  --text: var(--ink-100);
  --text-muted: var(--ink-300);
  --primary: var(--apricot-400);
  --primary-pressed: var(--apricot-300);
  --primary-soft: rgba(236, 148, 85, 0.15);
  --on-primary: #361B05;
  --border: var(--coal-600);
}

/* ------------------------------------------------------------ tipografia --- */
@font-face {
  font-family: 'Sentient';
  src: url('../assets/fonts/Sentient-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('../assets/fonts/Sentient-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('../assets/fonts/Sentient-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

.t-display { font: 700 clamp(2rem, 5vw, 3.4rem)/1.15 var(--fonte-display); letter-spacing: -0.02em; }
.t-title   { font: 700 clamp(1.5rem, 3vw, 1.75rem)/1.2 var(--fonte-display); letter-spacing: -0.01em; }
.t-frase   { font: 700 1.375rem/1.36 var(--fonte-display); }
.t-frase-lg{ font: italic 700 1.625rem/1.3 var(--fonte-display); }
.t-subtitle{ font: 600 1.25rem/1.3 var(--fonte-corpo); }
.t-body    { font: 400 1rem/1.44 var(--fonte-corpo); }
.t-caption { font: 400 0.8125rem/1.38 var(--fonte-corpo); }
.t-overline{
  font: 700 0.75rem/1.33 var(--fonte-corpo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================================
   MOTOR AQUARELA
   Três camadas dão o efeito: (1) grão do papel, (2) lavagem de cor com bordas
   irregulares, (3) acúmulo de pigmento nas bordas. Tudo em SVG/CSS puro —
   sem imagem externa, sem JS.
   ============================================================================= */

/* (1) Papel: fibra sutil + leve variação de tom. */
.papel {
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(245, 203, 164, 0.22), transparent 46%),
    radial-gradient(circle at 65% 88%, rgba(215, 201, 171, 0.28), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E");
}
[data-theme='dark'] .papel {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.06), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(236, 148, 85, 0.10), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.07'/%3E%3C/svg%3E");
}

/* (2) Bordas que respiram: o filtro desloca o contorno como pincel em papel.
   Aplique em qualquer bloco para tirar a régua da forma. */
.borda-pintada {
  filter: url(#aquarela-borda);
}

/* (3) Lavagem de cor: mancha translúcida com acúmulo nas bordas.
   Use --wash para trocar a cor. */
.wash {
  position: relative;
  --wash: var(--ember-200);
}
.wash::before {
  content: '';
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 30% 35%, var(--wash), transparent 70%),
    radial-gradient(50% 60% at 72% 62%, var(--wash), transparent 72%);
  opacity: 0.55;
  filter: blur(14px) url(#aquarela-borda);
  mix-blend-mode: multiply;
}
[data-theme='dark'] .wash::before { mix-blend-mode: screen; opacity: 0.32; }

/* Pincelada: faixa de cor com começo e fim irregulares (grifo de marca-texto) */
.pincelada {
  position: relative;
  display: inline;
  padding: 0 0.14em;
}
.pincelada::before {
  content: '';
  position: absolute;
  inset: 12% -0.1em 8%;
  z-index: -1;
  background: var(--primary-soft);
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  filter: url(#aquarela-borda);
}

/* Superfície de cartão em papel: sombra suave e quente, sem preto puro */
.cartao {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 2px rgba(94, 36, 9, 0.05),
    0 8px 24px -8px rgba(94, 36, 9, 0.14);
}

/* Moldura de raridade — o material evolui com o tier */
.moldura { padding: 3px; border-radius: var(--r-card); }
.moldura--comum    { background: rgba(255, 255, 255, 0.35); padding: 2px; }
.moldura--incomum  { background: var(--raridade-incomum); }
.moldura--raro     { background: var(--prata); }
.moldura--lendario { background: var(--foil); }

/* Selo de raridade */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  color: #fff;
  font: 700 0.75rem/1 var(--fonte-corpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.selo--comum    { background: var(--raridade-comum); }
.selo--incomum  { background: var(--raridade-incomum); }
.selo--raro     { background: var(--raridade-raro); }
.selo--lendario { background: var(--gold-400); border-color: var(--gold-200); }

/* ------------------------------------------------------------- utilidades --- */
.pilha { display: flex; flex-direction: column; }
.linha { display: flex; align-items: center; }
.centro { display: grid; place-items: center; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}