/* ==========================================================================
   Design tokens — SRInfo / versão 1 refinada
   Tema único em :root. Referências: dashboard-v1-refinada.css, telas refinadas,
   styles.css e componentes ui. Tokens descrevem os valores da interface;
   estados e regras responsivas continuam aplicados pelos componentes.
   ========================================================================== */

:root {
  /* Tipografia — Inter carregada pela aplicação. */
  --font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Títulos de página: text-xl / sm:text-2xl. */
  --font-size-display: 24px;
  --line-height-display: 32px;
  --font-weight-display: 700;
  --font-size-display-mobile: 20px;
  --line-height-display-mobile: 28px;
  --letter-spacing-display: -0.025em;
  --font-size-h2: 20px;
  --line-height-h2: 28px;
  --font-weight-h2: 700;
  --line-height-section-title: 1;
  --font-size-h3: 18px;
  --line-height-h3: 28px;
  --font-weight-h3: 600;
  --font-size-body: 14px;
  --line-height-body: 20px;
  --font-weight-body: 400;
  --font-size-body-sm: 13px;
  --line-height-body-sm: 1.5;
  --font-size-caption: 12px;
  --line-height-caption: 16px;
  --font-weight-caption: 500;
  --letter-spacing-caption: 0;
  --font-size-label: 11px;
  --line-height-label: 1.4;
  --font-size-micro: 10px;
  --line-height-micro: 1.5;
  --letter-spacing-table-heading: 0.05em;
  --letter-spacing-kanban-heading: 0.06em;
  --font-size-metric: 1.5rem;
  --line-height-metric: 1.2;
  --font-weight-metric: 700;
  --letter-spacing-metric: -0.02em;
  --font-size-metric-hint: 11px;
  --line-height-metric-hint: 1.5;
  --font-variant-numeric: tabular-nums;

  /* Escala de espaçamento usada nas classes utilitárias. */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --card-padding: var(--space-6);
  --card-padding-mobile: var(--space-4);
  --control-gap: var(--space-1-5);
  --modal-content-gap: var(--space-2);

  /* Raios derivados de --radius: 0.625rem em styles.css. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  --border-width: 1px;
  --control-height-sm: 32px;
  --control-height-md: 36px;
  --control-height-lg: 40px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --metric-icon-size: 19px;
  --metric-icon-container-size: 38px;
  --detail-panel-width: 420px;

  /* Neutros — prefixo ds evita colisão com a paleta do Tailwind. */
  --ds-color-neutral-900: #172033;
  --ds-color-neutral-600: #64748B;
  --ds-color-neutral-300: #DCE3EC;
  --ds-color-neutral-100: #F0F4FA;
  --ds-color-white: #FFFFFF;

  /* Marca — paleta adotada pela versão refinada. */
  --color-primary-600: hsl(202, 99%, 29%);
  --color-primary-700: hsl(202, 99%, 24%);
  --color-primary-400: hsl(202, 61%, 50%);
  --color-primary-300: hsl(202, 61%, 50%);
  --color-primary-200: hsl(202, 61%, 65%);
  --color-primary-100: hsl(202, 61%, 65%);
  --color-primary-50: hsl(201, 61%, 96%);

  /* Ação principal (tema "EMBRAPII Vivo" do protótipo). */
  --color-brand: #0B6FCF;
  --color-brand-hover: #0959B8;
  --color-brand-soft: #F0F6FC;
  --color-muted-bg: #E8EEF6;

  /* Paleta categórica dos indicadores. */
  --color-chart-1: #015c91;
  --color-chart-2: #34A853;
  --color-chart-3: #FBBC04;
  --color-chart-4: #EA4335;
  --color-chart-5: #A142F4;
  --color-chart-6: #00ACC1;
  --color-chart-orange: #F0A06A;
  --color-chart-5-soft: color-mix(in srgb, var(--color-chart-5) 14%, white);

  /* Status: texto e fundo. */
  --color-status-success: #188038;
  --color-status-success-bg: #E6F4EA;
  --color-status-warning: #B06000;
  --color-status-warning-bg: #FEF3D8;
  --color-status-danger: #C5221F;
  --color-status-danger-bg: #FCE8E6;
  --color-status-neutral: #5F6368;
  --color-status-neutral-bg: #F1F3F4;
  --color-status-info: #1A73E8;
  --color-status-info-bg: #E8F0FE;

  /* Etapas do funil / pipeline / kanban. */
  --color-stage-prospecting: var(--color-primary-200);
  --color-stage-prospecting-foreground: var(--color-primary-700);
  --color-stage-proposal: var(--color-primary-400);
  --color-stage-proposal-selected: var(--color-primary-600);
  --color-stage-plan: var(--color-primary-600);
  --color-stage-plan-selected: var(--color-primary-700);
  --color-stage-contract: var(--color-status-success);
  --color-stage-contract-selected: #147A27;
  --color-stage-foreground: var(--ds-color-white);
  --color-kanban-column-bg: #E8EEF9;
  --color-kanban-column-border: color-mix(in srgb, var(--color-stage-plan) 20%, transparent);
  --color-kanban-nonconverted-bg: var(--ds-color-neutral-100);
  --color-kanban-nonconverted-border: var(--ds-color-neutral-300);
  --color-kanban-nonconverted-badge: var(--ds-color-neutral-600);
  --color-archived-indicator: var(--ds-color-neutral-600);

  /* Superfícies e textos. */
  --color-canvas: var(--ds-color-neutral-100);
  --color-surface: var(--ds-color-white);
  --color-border-default: var(--ds-color-neutral-300);
  --color-text-primary: var(--ds-color-neutral-900);
  --color-text-secondary: var(--ds-color-neutral-600);
  --color-text-placeholder: var(--ds-color-neutral-600);
  --color-text-inverse: var(--ds-color-white);

  /* Interação — filtros, tabelas e navegação. */
  --color-action-bg: var(--color-primary-700);
  --color-action-hover-bg: var(--color-primary-600);
  --color-action-foreground: var(--ds-color-white);
  --color-hover-bg: var(--color-primary-50);
  --color-selected-bg: var(--color-primary-50);
  --color-selected-foreground: var(--color-primary-600);
  --color-field-bg: var(--color-canvas);
  --color-field-hover-bg: var(--color-primary-100);
  --color-row-hover-bg: #F0F6FC;
  --color-nav-hover-bg: var(--color-primary-100);
  --color-nav-hover-foreground: var(--color-primary-700);
  --color-filter-border: rgba(23, 32, 51, 0.1);
  --color-filter-hover-border: rgba(23, 32, 51, 0.14);
  --color-tab-track: var(--ds-color-neutral-300);
  --color-tab-track-border: #C5CED9;
  --color-tab-hover-bg: rgba(255, 255, 255, 0.5);
  --color-tab-active-bg: var(--ds-color-white);
  --color-tab-active-foreground: var(--color-brand);
  --color-button-secondary-bg: var(--color-primary-100);
  --color-button-secondary-border: #B9DDF2;
  --color-button-secondary-foreground: var(--color-primary-700);
  --color-button-primary-bg: var(--color-brand);
  --color-button-primary-hover-bg: var(--color-brand-hover);
  --color-button-primary-foreground: var(--ds-color-white);
  --color-button-segmented-divider: #B9DDF2;
  --color-button-success-bg: #e6f4ea;
  --color-button-success-foreground: #137333;
  --color-chart-stage-prospecting: var(--color-stage-prospecting);
  --color-chart-stage-proposal: var(--color-stage-proposal);
  --color-chart-stage-plan: var(--color-stage-plan);
  --font-weight-selected: 600;

  /* Foco dos filtros e funil; componentes ui usam anel sólido de 1px. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: color-mix(in srgb, var(--color-primary-600) 25%, transparent);
  --focus-ring-strong-color: color-mix(in srgb, var(--color-primary-600) 40%, transparent);
  --focus-ring-ui-width: 1px;
  --focus-ring-ui-color: #0B6FCF;
  --opacity-disabled: 0.5;
  --opacity-disabled-filter: 0.4;
  --opacity-disabled-inline-action: 0.35;
  --cursor-action: pointer;
  --cursor-disabled: not-allowed;
  --pointer-events-disabled: none;

  /* Elevação e movimento. */
  --shadow-card: 0 1px 2px rgba(23, 32, 51, 0.04);
  --shadow-none: none;
  --shadow-tab-active: 0 1px 3px rgba(23, 32, 51, 0.14);
  --shadow-funnel: 0 8px 18px -10px rgba(23, 32, 51, 0.35);
  --duration-default: 150ms;
  --duration-funnel: 200ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color var(--duration-default) var(--ease-default),
    background-color var(--duration-default) var(--ease-default),
    border-color var(--duration-default) var(--ease-default);

  /* Scrollbars. */
  --scrollbar-size: 6px;
  --scrollbar-thumb: #E2E8F0;
  --scrollbar-thumb-hover: var(--ds-color-neutral-300);
  --scrollbar-kanban-size: 4px;
  --scrollbar-kanban-thumb: #9BB8E8;
  --scrollbar-kanban-thumb-hover: #7AA0DC;
  --scrollbar-track: transparent;
}