/* ==========================================================================
   Design Tokens — Atendro AI
   All CSS custom properties. Never use raw hex values in components.
   ========================================================================== */

:root {

  /* --- Backgrounds --- */
  --bg-primary:      #07080f;
  --bg-secondary:    #0f1018;
  --bg-elevated:     #181923;

  /* --- Brand Colors --- */
  --blue:            #1a73e8;
  --green:           #00c853;
  --red-accent:      #e53935;

  /* --- Gradients --- */
  --gradient-brand:  linear-gradient(135deg, #1a73e8, #00c853);
  --gradient-glow:   linear-gradient(135deg, rgba(26,115,232,0.13), rgba(0,200,83,0.07));

  /* --- Text --- */
  --text-primary:    #f0f1f8;
  --text-secondary:  #8890a8;
  --text-muted:      #50566e;

  /* --- UI --- */
  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(26, 115, 232, 0.4);
  --shadow-glow:     0 0 40px rgba(0, 200, 83, 0.12);
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.4);

  /* --- Typography --- */
  --font-heading:    'Plus Jakarta Sans', sans-serif;
  --font-body:       'Inter', sans-serif;

  /* --- Type Scale --- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.0625rem;  /* 17px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.75rem;    /* 28px */

  /* --- Heading Scale (clamp) --- */
  --h1: clamp(2.75rem, 6.5vw, 5rem);
  --h2: clamp(2rem, 3.5vw, 3.25rem);
  --h3: 1.5rem;
  --h4: 1.125rem;

  /* --- Spacing --- */
  --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;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s ease;

  /* --- Z-index --- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-nav:     100;
  --z-drawer:  200;
  --z-overlay: 150;
  --z-chatbot: 300;
}