/* DentiFlow tokens canônicos — docs/22 + US-063. Espelhado em hosts como css/dentiflow-tokens.css */
:root {
  /* Cor */
  --df-ink: #173d35;
  --df-primary: #185e50;
  --df-primary-hover: #12483d;
  --df-primary-contrast: #ffffff;
  --df-spruce: var(--df-ink);
  --df-seafoam: var(--df-primary);
  --df-seafoam-deep: var(--df-primary-hover);
  --df-canvas: #f5f7f4;
  --df-porcelain: var(--df-canvas);
  --df-surface: #ffffff;
  --df-warm: #f4f0e7;
  --df-sage: #e5eee7;
  --df-mist: var(--df-sage);
  --df-cloud: var(--df-sage);
  --df-text: #203831;
  --df-ink-body: var(--df-text);
  --df-muted: #5b6d64;
  --df-border: #dce4dd;
  --df-control-border: #788d80;
  --df-accent: #c47752;
  --df-blush: var(--df-accent);
  --df-danger: #b42318;
  --df-warn: var(--df-danger);
  --df-warning: #825500;
  --df-ok: #236344;
  --df-success: var(--df-ok);
  --df-focus-ring: rgb(24 94 80 / 45%);

  /* Tipo */
  --df-font-ui: "Figtree", "Segoe UI", Arial, sans-serif;
  --df-font-brand: var(--df-font-ui);
  --df-font-editorial: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --df-text-body: 1rem;          /* 16px */
  --df-text-body-lh: 1.5;        /* 24px */
  --df-text-table: 0.875rem;     /* 14px */
  --df-text-table-lh: 1.4286;    /* ~20px */
  --df-text-support: 0.8125rem;  /* 13px */
  --df-text-support-lh: 1.3846;  /* ~18px */
  --df-text-title: 1.75rem;      /* 28px */
  --df-text-title-lh: 2.25rem;   /* 36px */
  --df-text-section: 1.125rem;   /* 18px */
  --df-text-section-lh: 1.625rem;/* 26px */

  /* Espaço (base 4px) */
  --df-space-1: 4px;
  --df-space-2: 8px;
  --df-space-3: 12px;
  --df-space-4: 16px;
  --df-space-6: 24px;
  --df-space-8: 32px;
  --df-space-12: 48px;
  --df-space-16: 64px;

  /* Raio / layout */
  --df-radius-control: 8px;
  --df-radius-card: 12px;
  --df-radius-art: 24px;
  --df-radius: var(--df-radius-card);
  --df-sidebar: 232px;
  --df-header: 64px;
  --df-control-height: 44px;

  /* Elevação / motion */
  --df-shadow: 0 8px 24px rgb(23 61 53 / 8%);
  --df-shadow-menu: 0 12px 32px rgb(23 61 53 / 12%);
  --df-duration: 160ms;
  --df-duration-slow: 240ms;
  --df-ease: ease;

  /* Bootstrap bridge (transição US-063) */
  --bs-body-font-family: var(--df-font-ui);
  --bs-body-font-size: var(--df-text-body);
  --bs-body-color: var(--df-text);
  --bs-body-bg: var(--df-canvas);
  --bs-heading-color: var(--df-ink);
  --bs-primary: var(--df-primary);
  --bs-primary-rgb: 24, 94, 80;
  --bs-success: var(--df-success);
  --bs-success-rgb: 35, 99, 68;
  --bs-warning: var(--df-warning);
  --bs-danger: var(--df-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-secondary: var(--df-muted);
  --bs-border-color: var(--df-border);
  --bs-link-color: var(--df-primary);
  --bs-link-hover-color: var(--df-primary-hover);
  --bs-border-radius: var(--df-radius-control);
  --bs-border-radius-lg: var(--df-radius-card);
  --bs-focus-ring-color: var(--df-focus-ring);
  --bs-font-sans-serif: var(--df-font-ui);
}

:focus-visible {
  outline: 3px solid var(--df-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}