/* =====================================================================
   REFÚGIO DELA · PLANNER
   Tokens. Base: _planner/04_IDENTIDADE_VISUAL_UX_UI.txt
   ===================================================================== */
:root {
  /* --- paleta oficial --- */
  --wine:   #5B1E2D;
  --rose:   #C47A7F;
  --blush:  #E7B8B5;
  --peach:  #E2C6A6;
  --sage:   #7D8B73;
  --trunk:  #5A4033;
  --sand:   #E6D8C3;
  --beige:  #F6F1EB;

  --wine-dark: #43151F;
  --rose-dark: #A9666B;

  /* --- papéis --- */
  --bg-page:        #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-soft:        #F7F7F8;
  --brand-primary:  var(--wine);
  --brand-secondary:var(--rose);
  --soft-highlight: var(--blush);
  --success-soft:   var(--sage);
  --border-soft:    #E4E4E7;

  /* Texto escuro de verdade. O TXT 04 manda priorizar #5A4033 ou #5B1E2D
     e proíbe rosa ou areia em texto pequeno. */
  --text-main:  #17171A;
  --text-soft:  #2B2B2E;
  --text-muted: #57575E;
  --text-on-brand: #FFFFFF;

  --danger: #A32E2E;
  --danger-bg: #FBEDED;

  /* --- tipografia --- */
  /* Raleway em tudo, titulo e corpo: e a familia da marca, e o CLAUDE.md
     proibe serifa em qualquer lugar. system-ui so entra se a fonte nao chegar. */
  --font-ui:    'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: 'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-tight: 1.2;
  --lh-base: 1.65;

  /* --- espaço, escala de 4 --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* --- forma --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(36,28,23,.06);
  --shadow:    0 4px 16px rgba(36,28,23,.08);
  --shadow-lg: 0 12px 32px rgba(36,28,23,.12);

  /* --- movimento: 150 a 250ms, sem exagero (TXT 04) --- */
  --t-fast: 150ms ease;
  --t-base: 220ms ease;

  /* --- layout --- */
  --maxw: 900px;
  --bottom-nav-h: 64px;
  --touch: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; }
}