/*
 * Kitchen CORE — tokens de interface compartilhados
 *
 * Esta é a fonte única para valores visuais reutilizáveis. Componentes novos
 * devem consumir os tokens semânticos. Os aliases legados no fim do arquivo
 * mantêm as telas atuais compatíveis durante a migração gradual.
 */

:root {
  /* Tipografia */
  --kc-font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --kc-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --kc-font-size-2xs: 9px;
  --kc-font-size-xs: 10px;
  --kc-font-size-sm: 11px;
  --kc-font-size-md: 12px;
  --kc-font-size-lg: 13px;
  --kc-font-size-xl: 14px;
  --kc-font-size-2xl: 15px;
  --kc-font-size-3xl: 16px;
  --kc-font-size-4xl: 18px;
  --kc-font-size-5xl: 20px;
  --kc-font-size-6xl: 22px;
  --kc-font-size-7xl: 24px;
  --kc-font-size-8xl: 26px;
  --kc-font-size-title: 38px;
  --kc-font-size-display: 48px;

  --kc-font-weight-regular: 400;
  --kc-font-weight-medium: 600;
  --kc-font-weight-semibold: 700;
  --kc-font-weight-bold: 800;
  --kc-font-weight-extrabold: 900;
  --kc-font-weight-black: 950;

  --kc-line-height-tight: 1.05;
  --kc-line-height-heading: 1.2;
  --kc-line-height-body: 1.45;
  --kc-line-height-relaxed: 1.6;

  /* Escala neutra */
  --kc-color-white: #ffffff;
  --kc-color-slate-25: #fbfcfe;
  --kc-color-slate-50: #f8fafc;
  --kc-color-slate-100: #f1f5f9;
  --kc-color-slate-200: #e2e8f0;
  --kc-color-slate-300: #cbd5e1;
  --kc-color-slate-400: #94a3b8;
  --kc-color-slate-500: #64748b;
  --kc-color-slate-600: #475569;
  --kc-color-slate-700: #334155;
  --kc-color-slate-800: #1e293b;
  --kc-color-slate-900: #0f172a;
  --kc-color-slate-950: #020617;

  /* Marca e estados */
  --kc-color-primary-50: #eff6ff;
  --kc-color-primary-100: #dbeafe;
  --kc-color-primary-200: #bfdbfe;
  --kc-color-primary-300: #93c5fd;
  --kc-color-primary-500: #3b82f6;
  --kc-color-primary-600: #2563eb;
  --kc-color-primary-700: #1d4ed8;
  --kc-color-primary-800: #1e40af;

  /* Roxo identifica recomendações calculadas ou sugeridas pelo sistema. */
  --kc-color-suggestion-50: #faf7ff;
  --kc-color-suggestion-100: #f0e8ff;
  --kc-color-suggestion-200: #dfd0ff;
  --kc-color-suggestion-300: #bea2f7;
  --kc-color-suggestion-600: #8452e8;
  --kc-color-suggestion-800: #5523a9;

  --kc-color-success-50: #f0fdf4;
  --kc-color-success-100: #dcfce7;
  --kc-color-success-300: #86efac;
  --kc-color-success-600: #16a34a;
  --kc-color-success-700: #15803d;
  --kc-color-success-800: #166534;

  --kc-color-warning-50: #fffbeb;
  --kc-color-warning-100: #fef3c7;
  --kc-color-warning-300: #fcd34d;
  --kc-color-warning-600: #d97706;
  --kc-color-warning-700: #a16207;
  --kc-color-warning-800: #854d0e;

  --kc-color-danger-50: #fff5f5;
  --kc-color-danger-100: #fee2e2;
  --kc-color-danger-300: #fca5a5;
  --kc-color-danger-600: #dc2626;
  --kc-color-danger-700: #b91c1c;
  --kc-color-danger-800: #991b1b;

  /* Identidade semântica dos módulos */
  --kc-color-people-50: #ecfdf5;
  --kc-color-people-100: #ccfbf1;
  --kc-color-people-200: #99f6e4;
  --kc-color-people-500: #14b8a6;
  --kc-color-people-600: #0f766e;
  --kc-color-people-700: #115e59;
  --kc-color-people-800: #134e4a;
  --kc-color-ranking-gold: #b7791f;
  --kc-color-ranking-silver: #64748b;
  --kc-color-ranking-bronze: #9a6b4b;

  /* Cores semânticas */
  --kc-color-page: #f3f6fb;
  --kc-color-page-soft: #f8fbff;
  --kc-color-page-deep: #eef3fa;
  --kc-color-surface: var(--kc-color-white);
  --kc-color-surface-subtle: var(--kc-color-slate-50);
  --kc-color-surface-muted: var(--kc-color-slate-100);
  /* Papéis de superfície: página > seção > card > campo > item em criação */
  --kc-color-surface-page: var(--kc-color-page);
  --kc-color-surface-section: var(--kc-color-page-soft);
  --kc-color-surface-card: var(--kc-color-surface);
  --kc-color-surface-field: var(--kc-color-surface);
  --kc-color-surface-field-hover: var(--kc-color-slate-25);
  --kc-color-surface-new: var(--kc-color-primary-50);
  --kc-color-surface-raised: var(--kc-color-surface);
  --kc-color-surface-inset: var(--kc-color-slate-50);
  --kc-color-surface-selected: var(--kc-color-primary-50);
  --kc-color-surface-selected-hover: var(--kc-color-primary-100);
  --kc-color-surface-panel: rgba(255, 255, 255, .98);
  --kc-color-text: var(--kc-color-slate-900);
  --kc-color-text-secondary: var(--kc-color-slate-600);
  --kc-color-text-muted: var(--kc-color-slate-500);
  --kc-color-text-disabled: var(--kc-color-slate-400);
  --kc-color-border: #d9e2ef;
  --kc-color-border-strong: var(--kc-color-slate-300);
  --kc-color-border-field: var(--kc-color-border-strong);
  --kc-color-border-new: var(--kc-color-primary-300);
  --kc-color-focus: var(--kc-color-primary-600);
  --kc-color-focus-ring: rgba(37, 99, 235, .16);
  --kc-color-overlay: rgba(15, 23, 42, .58);
  --kc-color-primary: var(--kc-color-primary-600);
  --kc-color-primary-hover: var(--kc-color-primary-700);
  --kc-color-primary-soft: #eaf2ff;
  --kc-color-success: var(--kc-color-success-700);
  --kc-color-warning: var(--kc-color-warning-700);
  --kc-color-danger: var(--kc-color-danger-600);
  /* Superfícies de estado: evitam usar tons claros diretamente em temas escuros. */
  --kc-color-primary-surface: var(--kc-color-primary-50);
  --kc-color-primary-surface-border: var(--kc-color-primary-200);
  --kc-color-primary-surface-text: var(--kc-color-primary-700);
  --kc-color-success-surface: var(--kc-color-success-50);
  --kc-color-success-surface-border: var(--kc-color-success-300);
  --kc-color-success-surface-text: var(--kc-color-success-800);
  --kc-color-warning-surface: var(--kc-color-warning-50);
  --kc-color-warning-surface-border: var(--kc-color-warning-300);
  --kc-color-warning-surface-text: var(--kc-color-warning-800);
  --kc-color-danger-surface: var(--kc-color-danger-50);
  --kc-color-danger-surface-border: var(--kc-color-danger-300);
  --kc-color-danger-surface-text: var(--kc-color-danger-800);
  --kc-color-suggestion-surface: var(--kc-color-suggestion-50);
  --kc-color-suggestion-surface-border: var(--kc-color-suggestion-300);
  --kc-color-suggestion-surface-text: var(--kc-color-suggestion-800);

  /* Espaçamento — base de 4px com intermediários para a UI densa */
  --kc-space-0: 0;
  --kc-space-1: 4px;
  --kc-space-2: 6px;
  --kc-space-3: 8px;
  --kc-space-4: 10px;
  --kc-space-5: 12px;
  --kc-space-6: 14px;
  --kc-space-7: 16px;
  --kc-space-8: 18px;
  --kc-space-9: 20px;
  --kc-space-10: 24px;
  --kc-space-11: 28px;
  --kc-space-12: 32px;
  --kc-space-14: 40px;
  --kc-space-16: 48px;
  --kc-space-20: 64px;

  /* Raios */
  --kc-radius-xs: 4px;
  --kc-radius-sm: 6px;
  --kc-radius-md: 8px;
  --kc-radius-lg: 12px;
  --kc-radius-control: 14px;
  --kc-radius-xl: 16px;
  --kc-radius-2xl: 20px;
  --kc-radius-shell: 22px;
  --kc-radius-3xl: 24px;
  --kc-radius-round: 50%;
  --kc-radius-pill: 999px;

  /* Dimensões de controles e layout */
  --kc-control-height-xs: 30px;
  --kc-control-height-sm: 34px;
  --kc-control-height-md: 40px;
  --kc-control-height-lg: 42px;
  --kc-control-height-xl: 46px;
  --kc-control-height-2xl: 50px;
  --kc-touch-target-min: 44px;
  --kc-icon-size-sm: 16px;
  --kc-icon-size-md: 20px;
  --kc-icon-size-lg: 24px;
  --kc-sidebar-width: 290px;
  --kc-sidebar-width-collapsed: 76px;
  --kc-content-max-width: 1500px;
  --kc-content-padding: 30px;
  --kc-content-padding-mobile: 16px;
  --kc-modal-width-sm: 460px;
  --kc-modal-width-md: 620px;
  --kc-modal-width-lg: 900px;
  --kc-sheet-header-height: 76px;

  /* Elevação */
  --kc-shadow-xs: 0 1px 3px rgba(15, 23, 42, .08);
  --kc-shadow-sm: 0 4px 14px rgba(15, 23, 42, .08);
  --kc-shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
  --kc-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);
  --kc-shadow-modal: 0 30px 70px rgba(15, 23, 42, .28);
  --kc-shadow-focus: 0 0 0 3px var(--kc-color-focus-ring);
  --kc-shadow-surface-card: var(--kc-shadow-xs);

  /* Camadas */
  --kc-z-sticky: 10;
  --kc-z-dropdown: 20;
  --kc-z-modal: 1000;
  --kc-z-sheet: 1100;
  --kc-z-confirm: 1200;
  --kc-z-toast: 1300;

  /* Movimento */
  --kc-duration-fast: 120ms;
  --kc-duration-normal: 180ms;
  --kc-ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Aliases temporários usados pelos estilos existentes */
  --bg: var(--kc-color-page);
  --card: var(--kc-color-surface);
  --text: var(--kc-color-text);
  --muted: var(--kc-color-text-muted);
  --line: var(--kc-color-border);
  --primary: var(--kc-color-primary);
  --primary-soft: var(--kc-color-primary-soft);
  --success: var(--kc-color-success);
  --danger: var(--kc-color-danger);
  --shadow: var(--kc-shadow-md);

  --app-bg: var(--kc-color-page);
  --app-card: var(--kc-color-surface);
  --app-text: var(--kc-color-text);
  --app-muted: var(--kc-color-text-muted);
  --app-line: var(--kc-color-border);
  --app-soft: var(--kc-color-surface-subtle);
  --app-blue: var(--kc-color-primary);
  --app-blue-soft: var(--kc-color-primary-soft);
  --app-green: var(--kc-color-success-600);
  --app-radius: var(--kc-radius-shell);
  --app-shadow: var(--kc-shadow-lg);
}

/*
 * Tema escuro compartilhado do Kitchen CORE.
 * O tema só é ativado quando o módulo define data-kc-theme="dark" em um
 * ancestral. A base é grafite; azul permanece reservado a ações e foco.
 */
[data-kc-theme="dark"] {
  color-scheme: dark;
  --kc-color-page: #17181a;
  --kc-color-page-soft: #1b1d20;
  --kc-color-page-deep: #121315;
  --kc-color-surface: #222427;
  --kc-color-surface-subtle: #1d1f22;
  --kc-color-surface-muted: #2b2e32;
  --kc-color-surface-page: var(--kc-color-page);
  --kc-color-surface-section: var(--kc-color-page-soft);
  --kc-color-surface-card: #242629;
  --kc-color-surface-field: #1a1c1f;
  --kc-color-surface-field-hover: #202225;
  --kc-color-surface-new: #2d3035;
  --kc-color-surface-raised: #292c30;
  --kc-color-surface-inset: #191b1e;
  --kc-color-surface-selected: #30343a;
  --kc-color-surface-selected-hover: #383d44;
  --kc-color-surface-panel: rgba(34, 36, 39, .98);
  --kc-color-text: #f4f4f5;
  --kc-color-text-secondary: #d4d4d8;
  --kc-color-text-muted: #a1a1aa;
  --kc-color-text-disabled: #71717a;
  --kc-color-border: #3a3d42;
  --kc-color-border-strong: #535860;
  --kc-color-border-field: var(--kc-color-border-strong);
  --kc-color-border-new: #69717c;
  --kc-color-primary-soft: var(--kc-color-surface-selected);
  --kc-color-overlay: rgba(0, 0, 0, .72);
  --kc-color-primary-surface: #202a3a;
  --kc-color-primary-surface-border: #365681;
  --kc-color-primary-surface-text: #bfdbfe;
  --kc-color-success-surface: #172a20;
  --kc-color-success-surface-border: #2c6544;
  --kc-color-success-surface-text: #bbf7d0;
  --kc-color-warning-surface: #302816;
  --kc-color-warning-surface-border: #735c22;
  --kc-color-warning-surface-text: #fde68a;
  --kc-color-danger-surface: #321b1f;
  --kc-color-danger-surface-border: #7a343d;
  --kc-color-danger-surface-text: #fecaca;
  --kc-color-suggestion-surface: #271f38;
  --kc-color-suggestion-surface-border: #6f55a4;
  --kc-color-suggestion-surface-text: #e9ddff;
  --kc-shadow-xs: 0 1px 3px rgba(0, 0, 0, .3);
  --kc-shadow-sm: 0 5px 16px rgba(0, 0, 0, .28);
  --kc-shadow-md: 0 14px 36px rgba(0, 0, 0, .32);
  --kc-shadow-lg: 0 28px 70px rgba(0, 0, 0, .42);
  --kc-shadow-modal: 0 34px 90px rgba(0, 0, 0, .58);
  --kc-shadow-surface-card: var(--kc-shadow-xs);

  --bg: var(--kc-color-page);
  --card: var(--kc-color-surface);
  --text: var(--kc-color-text);
  --muted: var(--kc-color-text-muted);
  --line: var(--kc-color-border);
  --primary-soft: var(--kc-color-primary-soft);
  --shadow: var(--kc-shadow-md);
  --app-bg: var(--kc-color-page);
  --app-card: var(--kc-color-surface);
  --app-text: var(--kc-color-text);
  --app-muted: var(--kc-color-text-muted);
  --app-line: var(--kc-color-border);
  --app-soft: var(--kc-color-surface-subtle);
  --app-blue-soft: var(--kc-color-primary-soft);
  --app-shadow: var(--kc-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kc-duration-fast: 0ms;
    --kc-duration-normal: 0ms;
  }
}