/* Petrocargo Design System · tokens v1.0.0
   Primitivos cromáticos e família tipográfica: Apresentação Petrocargo (p.6–7, p.24).
   Semântica, dimensões, estados, sombras e feedback: proposta digital Petrocargo (derivado). */

:root {
  /* Marca · oficial (PDF p.6) */
  --petrocargo-color-petroleo: #052222;      /* PANTONE 5395 C · Profundidade, confiança, solidez */
  --petrocargo-color-verde: #87F469;         /* PANTONE 7487 C · Energia, agilidade, destaque */
  --petrocargo-color-verde-cinza: #5C7E7D;   /* PANTONE 5487 C · Equilíbrio, sobriedade, técnica */
  --petrocargo-color-neutro-claro: #D9E2DE;  /* PANTONE 7541 C · Leveza, clareza, respiro */
  --petrocargo-color-branco: #FFFFFF;        /* PANTONE WHITE C · Limpeza, neutralidade, precisão */
  --petrocargo-color-preto: #000000;         /* PANTONE BLACK 6 C · Força, contraste, sofisticação */

  /* Tipografia · família oficial (PDF p.24); fallback provisório */
  --petrocargo-font-family: "carbona-variable", "Carbona", "Figtree", Arial, Helvetica, sans-serif;
  --petrocargo-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica · derivado */
  --petrocargo-type-display-xl: 500 clamp(40px, 5vw, 72px) / 1.05 var(--petrocargo-font-family);
  --petrocargo-type-display-l: 500 clamp(36px, 4vw, 56px) / 1.08 var(--petrocargo-font-family);
  --petrocargo-type-heading-xl: 500 clamp(28px, 3vw, 36px) / 1.15 var(--petrocargo-font-family);
  --petrocargo-type-heading-l: 500 clamp(24px, 2.4vw, 28px) / 1.2 var(--petrocargo-font-family);
  --petrocargo-type-heading-m: 500 clamp(20px, 1.8vw, 22px) / 1.3 var(--petrocargo-font-family);
  --petrocargo-type-body-l: 400 18px / 1.6 var(--petrocargo-font-family);
  --petrocargo-type-body-m: 400 16px / 1.6 var(--petrocargo-font-family);
  --petrocargo-type-body-s: 400 14px / 1.5 var(--petrocargo-font-family);
  --petrocargo-type-label: 500 14px / 1.3 var(--petrocargo-font-family);
  --petrocargo-type-caption: 400 12px / 1.5 var(--petrocargo-font-family);
  --petrocargo-type-section-label: 500 13px / 1.3 var(--petrocargo-font-family);

  /* Semântica · Light (derivado) */
  --petrocargo-background-page: var(--petrocargo-color-branco);
  --petrocargo-background-subtle: var(--petrocargo-color-neutro-claro);
  --petrocargo-background-brand: var(--petrocargo-color-petroleo);
  --petrocargo-surface-default: var(--petrocargo-color-branco);
  --petrocargo-surface-subtle: var(--petrocargo-color-neutro-claro);
  --petrocargo-surface-inverse: var(--petrocargo-color-petroleo);
  --petrocargo-text-primary: var(--petrocargo-color-petroleo);
  --petrocargo-text-secondary: #445959;            /* 75% petróleo + 25% branco */
  --petrocargo-text-inverse: var(--petrocargo-color-branco);
  --petrocargo-text-accent-on-dark: var(--petrocargo-color-verde);
  --petrocargo-interactive-primary: var(--petrocargo-color-verde);
  --petrocargo-interactive-on-primary: var(--petrocargo-color-petroleo);
  --petrocargo-interactive-hover: #A5F78E;         /* 75% verde + 25% branco */
  --petrocargo-interactive-pressed: #72D25E;       /* 84% verde + 16% petróleo */
  --petrocargo-interactive-link: var(--petrocargo-color-petroleo);
  --petrocargo-interactive-link-on-dark: var(--petrocargo-color-verde);
  --petrocargo-border-subtle: var(--petrocargo-color-neutro-claro);
  --petrocargo-border-control: var(--petrocargo-color-verde-cinza);
  --petrocargo-border-strong: var(--petrocargo-color-petroleo);
  --petrocargo-focus-on-light: var(--petrocargo-color-petroleo);
  --petrocargo-focus-on-dark: var(--petrocargo-color-verde);
  --petrocargo-disabled-surface: var(--petrocargo-color-neutro-claro);
  --petrocargo-disabled-text: #445959;

  /* Feedback · proposta funcional (não é cor de identidade) */
  --petrocargo-feedback-success-fg: #17613D;
  --petrocargo-feedback-success-surface: #EAF6EF;
  --petrocargo-feedback-warning-fg: #765400;
  --petrocargo-feedback-warning-surface: #FFF4CF;
  --petrocargo-feedback-critical-fg: #B42318;
  --petrocargo-feedback-critical-surface: #FEECEB;
  --petrocargo-feedback-info-fg: var(--petrocargo-color-petroleo);
  --petrocargo-feedback-info-surface: var(--petrocargo-color-neutro-claro);

  /* Espaço · derivado */
  --petrocargo-space-4: 4px;
  --petrocargo-space-8: 8px;
  --petrocargo-space-12: 12px;
  --petrocargo-space-16: 16px;
  --petrocargo-space-20: 20px;
  --petrocargo-space-24: 24px;
  --petrocargo-space-32: 32px;
  --petrocargo-space-40: 40px;
  --petrocargo-space-56: 56px;
  --petrocargo-space-80: 80px;

  /* Raios · derivado */
  --petrocargo-radius-none: 0px;
  --petrocargo-radius-control: 10px;
  --petrocargo-radius-panel: 16px;
  --petrocargo-radius-editorial: 24px;
  --petrocargo-radius-round: 999px;

  /* Bordas · derivado */
  --petrocargo-border-width-divider: 1px;
  --petrocargo-border-width-control: 1px;
  --petrocargo-border-width-focus: 2px;
  --petrocargo-focus-offset: 3px;

  /* Sombras · derivado */
  --petrocargo-shadow-rest: none;
  --petrocargo-shadow-raised: 0 1px 2px rgba(5, 34, 34, 0.06), 0 6px 16px rgba(5, 34, 34, 0.06);
  --petrocargo-shadow-overlay: 0 2px 6px rgba(5, 34, 34, 0.06), 0 18px 44px rgba(5, 34, 34, 0.10);

  /* Motion · derivado */
  --petrocargo-motion-feedback: 120ms;
  --petrocargo-motion-transition: 200ms;
  --petrocargo-motion-panel: 280ms;
  --petrocargo-motion-reduced: 0ms;
  --petrocargo-ease-functional: cubic-bezier(0.22, 1, 0.36, 1);
  --petrocargo-ease-linear: linear;

  /* Breakpoints · derivado (referência; CSS não lê variáveis em media queries) */
  --petrocargo-breakpoint-compact: 480px;
  --petrocargo-breakpoint-medium: 800px;
  --petrocargo-breakpoint-wide: 1120px;
  --petrocargo-breakpoint-large: 1440px;
}

/* Semântica · DarkEditorial (derivado) — superfície editorial escura, não é tema de app oficial */
[data-petrocargo-theme="dark-editorial"] {
  --petrocargo-background-page: var(--petrocargo-color-petroleo);
  --petrocargo-surface-default: var(--petrocargo-color-petroleo);
  --petrocargo-text-primary: var(--petrocargo-color-branco);
  --petrocargo-text-secondary: var(--petrocargo-color-neutro-claro);
  --petrocargo-text-accent: var(--petrocargo-color-verde);
  --petrocargo-text-on-accent: var(--petrocargo-color-petroleo);
  --petrocargo-border-control: var(--petrocargo-color-verde-cinza);
  --petrocargo-interactive-link: var(--petrocargo-color-verde);
  --petrocargo-focus-ring: var(--petrocargo-color-verde);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --petrocargo-motion-feedback: 0ms;
    --petrocargo-motion-transition: 0ms;
    --petrocargo-motion-panel: 0ms;
  }
}