/* Mosaic — Tessera Viva
   Uma só identidade: vidro digital, tipografia editorial, um único gradiente.
   O acento nunca é várias cores — é sempre um ponto do mesmo arco cromático. */

:root, [data-theme="dark"] {
  --bg: #0A0A10;
  --surface: #141418;
  --surface-2: #17171D;
  --surface-3: #1E1E25;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --hairline: rgba(255, 255, 255, .06);

  --text: #F5F5F7;
  --text-2: #9CA3AF;
  --text-3: #6B7280;
  --overlay: rgba(6, 6, 10, .66);

  /* Vidro digital — profundidade por camadas, não por efeitos. */
  --glass: rgba(20, 20, 24, .72);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-highlight: rgba(255, 255, 255, .05);
}

[data-theme="light"] {
  --bg: #F6F5F2;
  --surface: #FFFFFF;
  --surface-2: #FBFAF8;
  --surface-3: #FFFFFF;
  --border: rgba(20, 20, 24, .09);
  --border-strong: rgba(20, 20, 24, .16);
  --hairline: rgba(20, 20, 24, .06);

  --text: #16161A;
  --text-2: #565A63;
  --text-3: #8A8E97;
  --overlay: rgba(20, 20, 24, .34);

  --glass: rgba(255, 255, 255, .78);
  --glass-border: rgba(20, 20, 24, .08);
  --glass-highlight: rgba(255, 255, 255, .6);
}

:root {
  /* O gradiente — luz fria de cinema a tornar-se memória quente.
     Toda a cor do produto é amostrada deste arco, nunca inventada. */
  --g-start: #7C6CFF;
  --g-mid:   #A55EEA;
  --g-end:   #FF6B5E;
  --grad: linear-gradient(120deg, var(--g-start) 0%, var(--g-mid) 50%, var(--g-end) 100%);
  --grad-soft: linear-gradient(120deg,
    rgba(124, 108, 255, .14),
    rgba(165, 94, 234, .11) 50%,
    rgba(255, 107, 94, .13));

  /* Acento único (foco, seleção) — um ponto representativo do arco. */
  --accent: #8A78FF;
  --accent-hover: #9D8DFF;
  --accent-soft: rgba(138, 120, 255, .14);

  /* Tipos de obra = amostras ao longo do mesmo arco (frio → quente). */
  --c-movie:  #7C6CFF;
  --c-series: #9E6BEA;
  --c-anime:  #F06AC4;
  --c-book:   #D267A6;
  --c-album:  #FF6B5E;
  --c-person: #A55EEA;

  --star: #E9B44C;
  --like: #FF6B8B;
  --success: #6BCB9A;
  --danger: #E4655F;

  /* Tesserae — cantos arredondados como gramática do produto. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sombras curtas e densas — elevação subtil, sem brilhos coloridos. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, .40);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .48);

  /* Movimento lento e intencional. Nada de ressalto. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font);

  --container: 1240px;
  --nav-h: 66px;
}