:root{
  color-scheme:light;
  --brand-primary:#f28c28;
  --brand-primary-hover:#e97918;
  --brand-primary-active:#d96a0d;
  --brand-primary-strong:#d85f00;
  --brand-primary-deep:#b94e00;
  --brand-canvas:#fffcf8;
  --brand-surface:#ffffff;
  --brand-surface-soft:#fff7ef;
  --brand-surface-accent:#fff0df;
  --brand-surface-accent-strong:#fff3e6;
  --brand-ink:#211d1a;
  --brand-ink-soft:#3f3935;
  --brand-ink-muted:#5b544f;
  --brand-border:#f0d7c2;
  --brand-focus:#d85f00;
  --brand-font-display:"Lora",serif;
  --brand-font-body:"Manrope",sans-serif;
  --brand-radius-sm:12px;
  --brand-radius-md:18px;
  --brand-radius-lg:24px;
  --brand-radius-pill:999px;
  --brand-shadow-sm:0 6px 18px rgba(74,64,61,.10);
  --brand-shadow-md:0 12px 30px rgba(74,55,44,.12);
  --brand-shadow-action:0 10px 24px rgba(242,140,40,.24);
  --brand-content:1152px;
  --brand-reading:720px;

  /* Compatibilidade com os tokens usados pelo CSS existente. */
  --background:var(--brand-canvas);
  --foreground:var(--brand-ink);
  --primary:var(--brand-primary);
  --primary-foreground:var(--brand-ink);
  --secondary:var(--brand-surface-accent);
  --muted:var(--brand-surface-soft);
  --muted-foreground:var(--brand-ink-muted);
  --border:var(--brand-border);
  --input:var(--brand-border);
  --ring:var(--brand-focus);
  --rose:var(--brand-primary);
  --rose-soft:var(--brand-surface-accent-strong);
}

html{font-family:var(--brand-font-body)}
body{background:var(--brand-canvas);color:var(--brand-ink)}
