/* ============================================================================
   FOCUS — DESIGN TOKENS
   ============================================================================
   Paleta inspirada em "quiet luxury" financeiro: papel caro (light) e
   noite cálida (dark), com accent em champagne/verde-musgo ao invés do
   roxo-gradiente clichê. Tipografia editorial com Fraunces (display) +
   Geist (body) + Geist Mono (números).
============================================================================ */

:root {
  color-scheme: light dark;

  /* ─── TIPOGRAFIA ───────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Charter', 'Georgia', serif;
  --font-body:    'Geist', 'SF Pro Text', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-3xs:  0.6875rem;   /* 11px — caption/tiny */
  --fs-2xs:  0.75rem;     /* 12px */
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 0.9375rem;   /* 15px — body */
  --fs-md:   1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.25rem;     /* 36px */
  --fs-4xl:  3rem;        /* 48px */
  --fs-5xl:  4rem;        /* 64px */
  --fs-6xl:  5.5rem;      /* 88px */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;

  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;

  /* ─── ESPAÇAMENTO (base 4px) ───────────────────────────────────────── */
  --sp-0-5: 0.125rem;  /*  2px */
  --sp-1:   0.25rem;   /*  4px */
  --sp-1-5: 0.375rem;  /*  6px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* ─── RADIUS ───────────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ─── LAYOUT ───────────────────────────────────────────────────────── */
  --sidebar-w:         260px;
  --sidebar-w-compact: 72px;
  --header-h:          64px;
  --content-max:       1280px;

  --z-base:    1;
  --z-sticky:  50;
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-top:     500;

  /* ─── MOTION ───────────────────────────────────────────────────────── */
  /* Cubic-bezier custom "ease-out-refined" — curva principal do app */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-slower: 560ms;

  /* ─── TEMA CLARO (default) ─────────────────────────────────────────── */
  /* Papel caro: base off-white cálida, accent em verde-musgo profundo   */
  --bg:            #faf8f3;
  --bg-alt:        #ebe6d8;           /* sidebar: mais saturada, contraste firme com o body */
  --surface:       #ffffff;
  --surface-hi:    #f5f2ec;
  --surface-low:   #efece5;
  --surface-overlay: rgba(255, 255, 255, 0.7);

  --border:        rgba(26, 24, 21, 0.11);    /* era 0.08 — subimos um pouco */
  --border-strong: rgba(26, 24, 21, 0.2);     /* era 0.16 */
  --border-subtle: rgba(26, 24, 21, 0.05);    /* era 0.04 */

  --text:         #1a1815;
  --text-dim:     #5c5a56;
  --text-muted:   #8f8b84;
  --text-faint:   #b8b4ac;
  --text-invert:  #faf8f3;

  --accent:        #3d5a3d;  /* verde-musgo profundo */
  --accent-hover:  #2d4a2d;
  --accent-muted:  rgba(61, 90, 61, 0.08);
  --accent-contrast: #faf8f3;

  --success:       #4a7a5c;
  --success-muted: rgba(74, 122, 92, 0.1);
  --warning:       #c68b3a;
  --warning-muted: rgba(198, 139, 58, 0.1);
  --danger:        #c95a45;
  --danger-muted:  rgba(201, 90, 69, 0.1);
  --info:          #4a6c8a;
  --info-muted:    rgba(74, 108, 138, 0.1);

  --shadow-xs:  0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-sm:  0 2px 8px -2px rgba(26, 24, 21, 0.06), 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-md:  0 8px 24px -8px rgba(26, 24, 21, 0.12), 0 2px 6px rgba(26, 24, 21, 0.05);
  --shadow-lg:  0 20px 40px -12px rgba(26, 24, 21, 0.18), 0 4px 12px rgba(26, 24, 21, 0.06);
  --shadow-xl:  0 32px 64px -16px rgba(26, 24, 21, 0.2);

  --grain-opacity: 0.025;
}

/* ─── TEMA ESCURO ─────────────────────────────────────────────────────── */
/* Noite cálida: preto quente, accent champagne                            */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #0a0a0b;
  --bg-alt:         #0e0e10;
  --surface:        #131315;
  --surface-hi:     #1a1a1e;
  --surface-low:    #0f0f11;
  --surface-overlay:rgba(19, 19, 21, 0.7);

  --border:         rgba(245, 243, 238, 0.08);
  --border-strong:  rgba(245, 243, 238, 0.16);
  --border-subtle:  rgba(245, 243, 238, 0.04);

  --text:          #f5f3ee;
  --text-dim:      #a8a5a0;
  --text-muted:    #6b6964;
  --text-faint:    #3f3e3b;
  --text-invert:   #1a1815;

  --accent:         #d4b886;  /* champagne gold */
  --accent-hover:   #e8ce9e;
  --accent-muted:   rgba(212, 184, 134, 0.12);
  --accent-contrast:#1a1815;

  --success:        #7ac896;
  --success-muted:  rgba(122, 200, 150, 0.12);
  --warning:        #e8b878;
  --warning-muted:  rgba(232, 184, 120, 0.12);
  --danger:         #e8857a;
  --danger-muted:   rgba(232, 133, 122, 0.12);
  --info:           #7fa5c9;
  --info-muted:     rgba(127, 165, 201, 0.12);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 32px 64px -16px rgba(0, 0, 0, 0.7);

  --grain-opacity: 0.04;
}

/* Tema segue sistema quando data-theme não está setado */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:             #0a0a0b;
    --bg-alt:         #0e0e10;
    --surface:        #131315;
    --surface-hi:     #1a1a1e;
    --surface-low:    #0f0f11;
    --surface-overlay:rgba(19, 19, 21, 0.7);

    --border:         rgba(245, 243, 238, 0.08);
    --border-strong:  rgba(245, 243, 238, 0.16);
    --border-subtle:  rgba(245, 243, 238, 0.04);

    --text:          #f5f3ee;
    --text-dim:      #a8a5a0;
    --text-muted:    #6b6964;
    --text-faint:    #3f3e3b;
    --text-invert:   #1a1815;

    --accent:         #d4b886;
    --accent-hover:   #e8ce9e;
    --accent-muted:   rgba(212, 184, 134, 0.12);
    --accent-contrast:#1a1815;

    --success:        #7ac896;
    --success-muted:  rgba(122, 200, 150, 0.12);
    --warning:        #e8b878;
    --warning-muted:  rgba(232, 184, 120, 0.12);
    --danger:         #e8857a;
    --danger-muted:   rgba(232, 133, 122, 0.12);
    --info:           #7fa5c9;
    --info-muted:     rgba(127, 165, 201, 0.12);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl:  0 32px 64px -16px rgba(0, 0, 0, 0.7);

    --grain-opacity: 0.04;
  }
}

/* Usuário reduziu motion — desativa transições */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}