/* ==========================================================================
   Numax — Design Tokens
   Baseado no Design System oficial (DESIGN__2_.md)
   Não alterar valores deste arquivo sem autorização do design.
   ========================================================================== */

:root {
  /* ========== COLOR — Brand ========== */
  --color-blue: #0056B7;          /* CTA principal, marca */
  --color-blue-deep: #002652;     /* Fundos institucionais escuros */
  --color-charcoal: #111E36;      /* Texto, headlines sobre claro */
  --color-off-white: #E4E4E4;     /* Fundo claro alternativo */

   /* Aliases para compatibilidade com base.css/styles.css legado */
  --color-primary: var(--color-blue);
  --color-primary-deep: var(--color-blue-deep);

  /* ========== COLOR — Extensões (estados de UI) ========== */
  --color-blue-50: #ecf2f9;
  --color-blue-100: #d8e3f1;
  --color-blue-200: #b8cde9;
  --color-blue-300: #8fb6e3;
  --color-blue-400: #5b94d8;
  --color-blue-500: #2870c8;
  --color-blue-600: #0056B7;
  --color-blue-700: #00408a;
  --color-blue-800: #002652;
  --color-blue-900: #001833;

  /* ========== COLOR — Neutros ========== */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f1f1f2;
  --color-gray-200: #d4d6da;
  --color-gray-300: #b4b7bd;
  --color-gray-500: #6b6f78;
  --color-gray-700: #3a3e47;
  --color-black: #000000;

  /* ========== COLOR — Status ========== */
  --color-success: #1f9d6a;
  --color-warning: #d18a2e;
  --color-error: #c0392b;
  --color-info: #0056B7;

  /* ========== Gradient ========== */
  --gradient-brand: linear-gradient(135deg, #0056B7 0%, #002652 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #0056B7 0%, #002652 100%);
  --gradient-brand-radial: radial-gradient(circle at 30% 30%, #0056B7 0%, #002652 80%);
  --gradient-overlay-photo: linear-gradient(180deg, rgba(0,38,82,0) 0%, rgba(0,38,82,0.7) 100%);

  /* ========== Semantic — Backgrounds ========== */
  --bg-default: var(--color-white);
  --bg-subtle: var(--color-off-white);
  --bg-inverted: var(--color-blue-deep);
  --bg-deep: var(--color-charcoal);
  --bg-brand: var(--color-blue);
  --bg-gradient: var(--gradient-brand);

  /* ========== Semantic — Foregrounds ========== */
  --fg-default: var(--color-charcoal);
  --fg-on-deep: var(--color-blue-deep);
  --fg-muted: var(--color-gray-500);
  --fg-inverted: var(--color-white);
  --fg-accent: var(--color-blue);
  --fg-on-cta: var(--color-white);

  /* ========== Semantic — Borders ========== */
  --border-subtle: var(--color-gray-200);
  --border-default: var(--color-gray-300);
  --border-emphasis: var(--color-blue);
  --border-focus: var(--color-blue);

  /* ========== Semantic — Actions ========== */
  --action-primary: var(--color-blue);
  --action-primary-hover: var(--color-blue-700);
  --action-primary-text: var(--color-white);
  --action-secondary: var(--color-blue-deep);
  --action-secondary-hover: var(--color-charcoal);
  --action-link: var(--color-blue);
  --action-link-hover: var(--color-blue-700);

  /* ========== Typography ========== */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Type scale (formato: desktop / mobile) */
  --text-display-xl-size: 80px;
  --text-display-size: 64px;
  --text-h1-size: 48px;
  --text-h2-size: 40px;
  --text-h3-size: 28px;
  --text-h4-size: 22px;
  --text-lead-size: 20px;
  --text-body-size: 17px;
  --text-small-size: 15px;
  --text-caption-size: 13px;
  --text-button-size: 16px;
  --text-price-size: 48px;

  /* ========== Spacing — base 4px ========== */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section padding */
  --section-y-desktop: var(--space-20);   /* 80px */
  --section-y-mobile: var(--space-12);    /* 48px */
  --container-x-desktop: var(--space-8);  /* 32px */
  --container-x-mobile: var(--space-5);   /* 20px */

  /* ========== Radius ========== */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ========== Shadow ========== */
  --shadow-xs: 0 1px 2px rgba(17, 30, 54, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 30, 54, 0.06);
  --shadow-md: 0 6px 18px rgba(17, 30, 54, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 30, 54, 0.12);
  --shadow-xl: 0 24px 56px rgba(17, 30, 54, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(17, 30, 54, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 86, 183, 0.32);

  /* ========== Layout ========== */
  --container-max: 1200px;

  /* ========== Motion ========== */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-index ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
  }
}

/* Mobile breakpoints — type scale */
@media (max-width: 768px) {
  :root {
    --text-display-xl-size: 48px;
    --text-display-size: 40px;
    --text-h1-size: 36px;
    --text-h2-size: 30px;
    --text-h3-size: 22px;
    --text-h4-size: 20px;
    --text-lead-size: 18px;
    --text-body-size: 16px;
    --text-small-size: 14px;
    --text-caption-size: 12px;
    --text-button-size: 15px;
    --text-price-size: 36px;
  }
}