/* ==========================================================================
   Melo Tecnologia — Design Tokens (Impeccable Edition)
   Sober, authentic engineering aesthetic. No AI gradient slop, no fake glows.
   ========================================================================== */

:root {
  /* Surfaces & Canvas */
  --bg-canvas:          #0B0D13;
  --bg-surface:         #12151E;
  --bg-surface-raised:  #171B26;
  --bg-card:            #131620;
  --bg-card-hover:      #191E2B;
  --bg-nav:             rgba(11, 13, 19, 0.88);

  /* Lines & Borders (Commit to crisp 1px definition) */
  --border-subtle:      rgba(255, 255, 255, 0.07);
  --border-medium:      rgba(255, 255, 255, 0.12);
  --border-strong:      rgba(255, 255, 255, 0.22);
  --border-focus:       #6366F1;

  /* Typography Colors (Solid contrast, WCAG compliant) */
  --text-primary:       #F8FAFC;
  --text-secondary:     #CBD5E1;
  --text-tertiary:      #94A3B8;
  --text-muted:         #64748B;

  /* Purposeful Accents (Used strictly for functional elements) */
  --accent-indigo:      #4F46E5;
  --accent-indigo-hover:#4338CA;
  --accent-blue:        #3B82F6;
  --accent-emerald:     #86EFAC;
  --accent-amber:       #D97706;

  /* Grounded Directional Shadows (No zero-offset colored halos) */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 12px 28px -6px rgba(0, 0, 0, 0.6);

  /* Typography Stacks */
  --font-display:       'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:          'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing */
  --space-2xs:          0.5rem;   /* 8px */
  --space-xs:           0.75rem;  /* 12px */
  --space-sm:           1rem;     /* 16px */
  --space-md:           1.5rem;   /* 24px */
  --space-lg:           2rem;     /* 32px */
  --space-xl:           3rem;     /* 48px */
  --space-2xl:          4.5rem;   /* 72px */

  /* Radii (Clean, 8-16px, pills reserved for small tags/controls) */
  --radius-xs:          4px;
  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-pill:        9999px;

  /* Transitions */
  --ease-smooth:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           140ms;
  --dur-normal:         240ms;

  /* Layout */
  --max-width:          1200px;
  --gutter:             clamp(1.25rem, 4vw, 2.5rem);
}