@layer tokens {

:root {
 
  --bg: #f4efe6;

  --panel-strong: rgba(255,255,255,0.92);
  --panel-mid: rgba(255,255,255,0.85);
  --panel-soft: rgba(255,255,255,0.7);
  --panel-faint: rgba(255,255,255,0.55);

  --panel: var(--panel-strong);

  --text: #2c2a27;      
  --text-soft: #4a463f;  
  --muted: #8a8176;

  --accent: #c45a5a;
  --warm: #caa06a;

  --cazadores: #c47b5a;
  --cat-02: #c45a5a; 
  --cat-03: #caa06a; 
  --cat-04: #b7a56a;

  --cat-05: #8fa77a; 
  --cat-06: #5f9a8b;
  --cat-07: #4f9f86; 

  --konpeito: #6f8fa8;
  --cat-08: #6f8fa8;
  --cat-09: #6f86d6; 

  --cat-10: #8c7aa8; 
  --cat-11: #a87a92; 

  --autoconclusiva: #b08b73; 

   --link-minisite: #caa06a;
  --link-wattpad: #c45a5a;
  --link-inkitt: #5f9a8b;
  --link-royalroad: #6f8fa8;
  --link-goodreads: #8c7aa8;

  --border: rgba(60, 45, 30, 0.08);
  --radius: 16px;
  --shadow: 0 20px 40px rgba(60, 40, 20, 0.18);

  --ambient-warm: rgba(202,160,106,0.10);
  --ambient-dark: rgba(43,41,38,0.03);
  --ambient-bg: rgba(244,239,230,0.4);

  --gradient-accent: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--warm) 70%, transparent),
    var(--accent),
    color-mix(in srgb, var(--warm) 70%, transparent),
    transparent
  );
}

}