/* ============================================================
   WRO Tecnologia — Colors & Type
   Single source of truth for tokens used across the brand.
   Reference: README.md  |  Source of truth: Design System v1.0
   ============================================================ */

/* ---------- Fonts ----------
   As declarações @font-face vivem no arquivo de tokens original do design
   system (colors_and_type.css na raiz do projeto WRO) e foram removidas
   desta cópia de handoff para não duplicar a definição das famílias.
   Ao implementar, declare as quatro faces a partir dos arquivos em
   ./fonts/ (ou via next/font/local):
     "Space Grotesk"  weight 300 700  normal  SpaceGrotesk-VariableFont.ttf
     "Inter"          weight 100 900  normal  Inter-VariableFont.ttf
     "Inter"          weight 100 900  italic  Inter-Italic-VariableFont.ttf
     "JetBrains Mono" weight 100 800  normal  JetBrainsMono-Variable-latin.woff2
   Todas com font-display: swap.
   -------------------------------- */

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* Primary — Navy. Extracted from the logo. */
  --wro-navy-900: #0d1035;
  --wro-navy-700: #1a1f5c;  /* Hero / primary anchor */
  --wro-navy-600: #252c82;
  --wro-navy-500: #3b45b5;
  --wro-navy-400: #6872cc;
  --wro-navy-200: #b0b5e8;
  --wro-navy-50:  #e8eaf6;

  /* Accent — Blue. CTAs, links, interactive elements. */
  --wro-blue-700: #1d4ed8;
  --wro-blue-500: #3b82f6;  /* Primary accent */
  --wro-blue-400: #60a5fa;
  --wro-blue-200: #bfdbfe;
  --wro-blue-50:  #eff6ff;

  /* Neutrals — slate-tinted. Never pure black. */
  --wro-gray-900: #0f172a;
  --wro-gray-700: #334155;
  --wro-gray-500: #64748b;
  --wro-gray-400: #94a3b8;
  --wro-gray-300: #cbd5e1;
  --wro-gray-200: #e2e8f0;
  --wro-gray-100: #f1f5f9;
  --wro-gray-50:  #f8fafc;

  /* Semantic — status only, never decorative. */
  --wro-success:   #16a34a;
  --wro-success-bg:#dcfce7;
  --wro-success-fg:#166534;
  --wro-warning:   #d97706;
  --wro-warning-bg:#fef9c3;
  --wro-warning-fg:#854d0e;
  --wro-error:     #dc2626;
  --wro-error-bg:  #fee2e2;
  --wro-error-fg:  #991b1b;
  --wro-info:      #0891b2;
  --wro-info-bg:   #cffafe;
  --wro-info-fg:   #155e75;

  /* Dark-mode surfaces — navy deepens, never goes pure black. */
  --wro-surface-0: #07080f;
  --wro-surface-1: #0d1035;
  --wro-surface-2: #131844;
  --wro-surface-3: #1a2060;

  /* ---------- Semantic role aliases (light theme) ---------- */
  --bg:            #ffffff;
  --bg-muted:      var(--wro-gray-50);
  --bg-subtle:     var(--wro-gray-100);
  --bg-inverse:    var(--wro-navy-700);

  --fg:            var(--wro-gray-900);   /* body text */
  --fg-muted:      var(--wro-gray-500);   /* secondary */
  --fg-subtle:     var(--wro-gray-400);   /* tertiary, placeholders */
  --fg-inverse:    #ffffff;
  --fg-anchor:     var(--wro-navy-700);   /* headlines */
  --fg-link:       var(--wro-blue-700);

  --border:        var(--wro-gray-200);
  --border-strong: var(--wro-gray-300);
  --border-focus:  var(--wro-navy-700);

  --accent:        var(--wro-blue-500);
  --accent-hover:  var(--wro-blue-700);
  --primary:       var(--wro-navy-700);
  --primary-hover: var(--wro-navy-900);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — pixel values from the brand spec */
  --fs-h1:    40px;
  --fs-h2:    28px;
  --fs-h3:    20px;
  --fs-h4:    16px;
  --fs-body:  15px;
  --fs-small: 13px;
  --fs-label: 11px;

  --lh-tight: 1.2; /* @kind font */
  --lh-body:  1.7; /* @kind font */
  --lh-small: 1.6; /* @kind font */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ============================================================
     SPACING — base 4px
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sharp: 2px;
  --radius-sm:    4px;
  --radius-md:    8px;   /* default — buttons & inputs */
  --radius-lg:    12px;  /* cards & modals */
  --radius-pill:  20px;  /* badges & tags only */

  /* ============================================================
     ELEVATION — very restrained. The brand is flat.
     ============================================================ */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(13, 16, 53, 0.06);
  --shadow-md:   0 4px 12px rgba(13, 16, 53, 0.08);
  --shadow-lg:   0 12px 32px rgba(13, 16, 53, 0.12);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --grid-cols: 12; /* @kind other */
  --grid-gap: 24px;
  --gutter-mobile:  24px;
  --gutter-desktop: 48px;

  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}

/* Dark mode role flip — the navy deepens to become the canvas. */
[data-theme="dark"] {
  --bg:         var(--wro-surface-0);
  --bg-muted:   var(--wro-surface-1);
  --bg-subtle:  var(--wro-surface-2);
  --bg-inverse: #ffffff;

  --fg:         #ffffff;
  --fg-muted:   var(--wro-navy-200);
  --fg-subtle:  var(--wro-navy-400);
  --fg-inverse: var(--wro-navy-900);
  --fg-anchor:  #ffffff;
  --fg-link:    var(--wro-blue-400);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — drop-in classes
   ============================================================ */
.wro-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-anchor);
  margin: 0;
}
.wro-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg-anchor);
  margin: 0;
}
.wro-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-anchor);
  margin: 0;
}
.wro-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}
.wro-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.wro-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}
.wro-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.wro-code,
.wro-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
}

/* ============================================================
   GLOBAL BASE — opt-in via .wro-base on a wrapping element.
   We avoid `*` selectors so consumers can integrate piecemeal.
   ============================================================ */
.wro-base {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}