/* =====================================================
   TOKENS.CSS — Brand Design Tokens
   NSC Business Diagnostic | Negocios Sin Caos
   Teal / Orange Fusion Style
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Page / Panel Backgrounds ── */
  --page-bg:             #00465f;
  --panel-bg:            #075a72;
  --panel-bg-2:          #0b6179;
  --panel-border:        #1f7890;
  --panel-border-strong: #f5a623;

  /* ── Accent Colors ── */
  --orange:              #ffa726;
  --orange-dark:         #f58b00;
  --gold:                #ffc145;

  /* ── Text ── */
  --text-main:           #f5fbff;
  --text-muted:          #b9ccd4;
  --text-soft:           #8fb0bc;

  /* ── Semantic ── */
  --success:             #72d85f;
  --warning:             #ffbd3e;
  --danger:              #ff5a4f;
  --info:                #72c7ff;

  /* ── Radii ── */
  --radius:              8px;
  --radius-sm:           5px;
  --radius-full:         9999px;

  /* ── Typography ── */
  --font-head:  'Montserrat', 'Barlow Condensed', sans-serif;
  --font-body:  'Inter', 'Roboto', sans-serif;

  /* ── Gradients ── */
  --gradient-card:    linear-gradient(180deg, #075f79, #064f68);
  --gradient-btn:     linear-gradient(180deg, #ffb23a, #f7941d);
  --gradient-bar:     linear-gradient(90deg, #f7941d, #ffc145);

  /* ── Shadows ── */
  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 18px rgba(0,0,0,0.18);
  --shadow-glow-orange: 0 0 8px rgba(255,167,38,0.5);

  /* ── Spacing (kept for compatibility) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-screen: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-progress: 100;
}