/* ==========================================================================
   Senhorê Nail — tokens de design (fonte única de cores, tipografia, espaços)
   Nenhum outro arquivo deve declarar cores ou tamanhos "soltos": use estes tokens.
   ========================================================================== */
:root {
  /* Tipografia — fonte do sistema (o app funciona offline) e apenas 3 pesos */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.875rem;  /* 14 — texto padrão */
  --fs-lg: 1rem;      /* 16 */
  --fs-xl: 1.25rem;   /* 20 — títulos de seção */
  --fs-2xl: 1.5rem;   /* 24 — título de página */
  --fs-3xl: 1.875rem; /* 30 — números de destaque */
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Espaçamento (escala de 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Bordas e sombras */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(24, 20, 30, 0.06);
  --sh-2: 0 4px 14px rgba(24, 20, 30, 0.08);
  --sh-3: 0 16px 40px rgba(24, 20, 30, 0.18);

  /* Neutros */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fafafb;
  --surface-3: #f0f0f3;
  --border: #e4e4e9;
  --border-strong: #cfcfd7;
  --text: #1d1b22;
  --text-2: #55535e;
  --text-3: #666470;     /* 5.5:1 sobre branco; 4.8:1 sobre o tom suave de destaque */
  --overlay: rgba(24, 20, 30, 0.48);

  /* Destaque (ameixa por padrão; trocado por [data-accent]) */
  --accent: #6b2d5c;
  --accent-hover: #582349;
  --accent-active: #481c3c;
  --accent-soft: #f6ecf3;
  --accent-soft-2: #ecd5e6;
  --on-accent: #ffffff;

  /* Estados do sistema */
  --info: #1d4f91;      --info-bg: #e8f0fb;      --info-bd: #c3d6f1;
  --success: #1b6b3a;   --success-bg: #e4f4ea;   --success-bd: #b8e0c6;
  --warning: #8a5300;   --warning-bg: #fff2d9;   --warning-bd: #f1d49a;
  --danger: #a12626;    --danger-bg: #fbeaea;    --danger-bd: #efc2c2;
  --neutral: #4f4d58;   --neutral-bg: #efeff3;   --neutral-bd: #d9d9e0;
  --teal: #0f6b63;      --teal-bg: #e0f4f1;      --teal-bd: #b3e1da;

  /* Status de atendimento (uma cor por status, usada em toda a agenda) */
  --st-agendado: var(--info);        --st-agendado-bg: var(--info-bg);        --st-agendado-bd: var(--info-bd);
  --st-confirmado: var(--teal);      --st-confirmado-bg: var(--teal-bg);      --st-confirmado-bd: var(--teal-bd);
  --st-atendimento: var(--warning);  --st-atendimento-bg: var(--warning-bg);  --st-atendimento-bd: var(--warning-bd);
  --st-concluido: var(--success);    --st-concluido-bg: var(--success-bg);    --st-concluido-bd: var(--success-bd);
  --st-cancelado: var(--danger);     --st-cancelado-bg: var(--danger-bg);     --st-cancelado-bd: var(--danger-bd);
  --st-faltou: var(--neutral);       --st-faltou-bg: var(--neutral-bg);       --st-faltou-bd: var(--neutral-bd);

  /* Layout */
  --sidebar-w: 256px;
  --sidebar-w-compact: 72px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --content-max: 1240px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  color-scheme: light;
}

/* Cores de destaque disponíveis em Configurações → Aparência */
[data-accent="ameixa"] { --accent: #6b2d5c; --accent-hover: #582349; --accent-active: #481c3c; --accent-soft: #f6ecf3; --accent-soft-2: #ecd5e6; }
[data-accent="vinho"]  { --accent: #7d1f3f; --accent-hover: #67193a; --accent-active: #52132e; --accent-soft: #f9eaee; --accent-soft-2: #f0cdd6; }
[data-accent="lilas"]  { --accent: #54449b; --accent-hover: #453882; --accent-active: #382d69; --accent-soft: #eeecf8; --accent-soft-2: #d9d4f0; }
[data-accent="azul"]   { --accent: #1f5e99; --accent-hover: #194d7f; --accent-active: #133d65; --accent-soft: #e9f1f9; --accent-soft-2: #cadff1; }
[data-accent="verde"]  { --accent: #1f6b4f; --accent-hover: #195740; --accent-active: #134532; --accent-soft: #e7f3ee; --accent-soft-2: #c6e4d7; }
[data-accent="grafite"]{ --accent: #33323d; --accent-hover: #24232c; --accent-active: #17161c; --accent-soft: #efeff2; --accent-soft-2: #dcdce2; }