/* ==========================================================
   DEBBY BABY — Design Tokens
   Paleta oficial + tipografia + escala visual
   ========================================================== */

:root {
  /* ---------- Cores da Marca ---------- */
  --color-cappuccino: #8B6B5A;          /* primária */
  --color-cappuccino-dark: #6E5346;
  --color-cappuccino-light: #A68A7A;

  --color-oliva: #A8B08D;               /* secundária */
  --color-oliva-dark: #8A946F;
  --color-oliva-light: #C2C9AC;

  --color-rose: #D8B7A7;                /* acento */
  --color-rose-dark: #C19A87;
  --color-rose-light: #E8D2C5;

  --color-creme: #F4EADF;               /* neutro */
  --color-nude: #CBB8A3;                /* neutro */
  --color-branco-quente: #FFF9F4;       /* fundo principal */

  /* ---------- Aliases Semânticos ---------- */
  --bg: var(--color-branco-quente);
  --bg-soft: var(--color-creme);
  --surface: #FFFFFF;
  --surface-2: #FBF6F0;

  --text: #4A3B33;
  --text-soft: #7A6759;
  --text-muted: #A89384;
  --text-inverse: #FFFFFF;

  --border: #EADFD2;
  --border-soft: #F1E9DD;
  --border-strong: #D8C6B4;

  --primary: var(--color-cappuccino);
  --primary-hover: var(--color-cappuccino-dark);
  --accent: var(--color-rose);
  --accent-hover: var(--color-rose-dark);
  --success: var(--color-oliva);
  --success-hover: var(--color-oliva-dark);
  --danger: #C97D6B;
  --warning: #D4A574;
  --info: #9AAAB8;

  /* Status do pedido */
  --status-orcamento: #C9B89E;
  --status-aguardando: #D4A574;
  --status-producao: #A8B08D;
  --status-personalizacao: #B89C8A;
  --status-pronto: #8AA67E;
  --status-entregue: #6B8E5A;
  --status-cancelado: #B88276;

  /* ---------- Tipografia ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-script: 'Dancing Script', 'Brush Script MT', cursive;
  --font-body: 'Nunito', 'Quicksand', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Espaçamento ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Bordas ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---------- Sombras suaves (estilo boutique) ---------- */
  --shadow-xs: 0 1px 2px rgba(139, 107, 90, 0.04);
  --shadow-sm: 0 2px 8px rgba(139, 107, 90, 0.06);
  --shadow-md: 0 8px 24px rgba(139, 107, 90, 0.08);
  --shadow-lg: 0 16px 48px rgba(139, 107, 90, 0.10);
  --shadow-xl: 0 24px 64px rgba(139, 107, 90, 0.14);
  --shadow-glow: 0 0 0 4px rgba(216, 183, 167, 0.15);

  /* ---------- Transições ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 220ms var(--ease);
  --t-slow: 400ms var(--ease-out);

  /* ---------- Layout ---------- */
  --sidebar-w: 250px;
  --topbar-h: 72px;
  --container: 1280px;
  --z-toast: 90;
  --z-modal: 100;
  --z-overlay: 95;
}