/* ==========================================================================
   Lobo de Cyrano Editora | tokens de cor e tipografia
   Cores: Manual da marca (Lobo de Cyrano - Manual.pdf)
   Fonte: Segoe UI, como na bookpage da Bailarina Grandona.
   Itens marcados "proposta" não estão no Manual e podem ser trocados.
   ========================================================================== */

/* Selawik: fonte livre da Microsoft (licença SIL OFL), desenhada para substituir a Segoe UI
   com as mesmas medidas. Quem não tem a Segoe UI (Mac, Android, Linux) vê a Selawik.
   Fica no próprio servidor, sem chamar sites de terceiros. */
@font-face {
  font-family: "Selawik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Selawik-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Selawik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Selawik-Bold.woff2") format("woff2");
}

:root {
  /* ---- Paleta da marca (Manual) ---- */
  --indigo:   #3834bf;   /* RGB 56, 52, 191   | principal */
  --violeta:  #6a59d9;   /* RGB 106, 89, 217  | secundária */
  --lavanda:  #8d9cf2;   /* RGB 141, 156, 242 | fundos suaves, decoração */
  --azul-ceu: #5ec8f2;   /* RGB 94, 200, 242  | destaque sobre índigo */
  --ciano:    #6be4f2;   /* RGB 107, 228, 242 | destaque pontual */

  /* ---- Derivadas das cores da marca (proposta) ---- */
  --lavanda-50:  #eef0fd;  /* lavanda a 15% sobre branco */
  --lavanda-100: #dde1fb;  /* lavanda a 30% sobre branco */
  --ciano-50:  #edfcfd;  /* ciano a 12% sobre branco */
  --ciano-100: #d6f7fb;  /* ciano a 30% */
  --ciano-300: #b5f2f8;  /* ciano a 55% */
  --ceu-50:    #ecf8fd;  /* azul-céu a 12% */
  --ceu-100:   #d2f0fb;  /* azul-céu a 30% */
  --ceu-300:   #aee4f8;  /* azul-céu a 55% */
  /* Fundos em degradê: o site é claro, com ciano e azul-céu em grandes áreas */
  --degrade-ar:    linear-gradient(135deg, var(--ciano-100) 0%, var(--ceu-100) 55%, var(--lavanda-100) 100%);
  --degrade-ceu:   linear-gradient(100deg, var(--azul-ceu) 0%, var(--ciano) 100%);
  --degrade-suave: linear-gradient(120deg, var(--ceu-50) 0%, var(--ciano-50) 100%);
  --indigo-hover: color-mix(in srgb, var(--indigo) 82%, #14141e);
  --indigo-noite: color-mix(in srgb, var(--indigo) 38%, #14141e); /* sombras e o lobo da ilustração */

  /* ---- Neutros (proposta; o Manual não define neutros) ---- */
  --papel:       #fafafc;  /* fundo geral */
  --papel-arco:  #f0f0f4;  /* arcos decorativos do fundo, como no Manual */
  --branco:      #ffffff;
  --tinta:       #14141e;  /* texto principal */
  --texto-suave: #4a4a60;  /* texto secundário */
  --linha:       #e1e1ea;  /* filetes e bordas */

  /* ---- Cor de destaque por livro ----
     Cada bookpage pode redefinir --acento. A Bailarina Grandona mantém a paleta própria do livro. */
  --acento: var(--indigo);
  --acento-hover: var(--indigo-hover);
  --acento-contraste: var(--branco);

  /* ---- Tipografia: tudo em Segoe UI (ou a Selawik, igual por fora), sem itálico ---- */
  --fonte-texto: "Segoe UI", "Segoe UI Variable", "Selawik", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-display: var(--fonte-texto);

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:  clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --t-xl:  clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
  --t-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --t-3xl: clamp(2.2rem, 1.5rem + 3.6vw, 3.8rem);

  /* ---- Forma e espaço ---- */
  --raio-sm: 12px;
  --raio:    24px;
  --raio-lg: 32px;
  --pilula:  999px;
  --sombra:  0 14px 36px rgba(56, 52, 191, 0.14);
  --largura: 1120px;
  --gutter:  clamp(16px, 5vw, 32px);
  --secao-y: clamp(48px, 9vw, 96px);
}