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

:root {

  /* --- Backgrounds --- */
  --bg-primary:      #06070e;
  --bg-secondary:    #0d0f1a;
  --bg-elevated:     #161927;

  /* --- Brand Colors --- */
  --brand:           #6d5ef8;
  --accent:          #22d3ee;
  --danger:          #f43f5e;

  /* --- Gradients --- */
  --gradient-brand:  linear-gradient(135deg, #6d5ef8, #22d3ee);
  --gradient-glow:   linear-gradient(135deg, rgba(109,94,248,0.16), rgba(34,211,238,0.08));

  /* --- Text --- */
  --text-primary:    #f2f3fb;
  --text-secondary:  #8f96b2;
  --text-muted:      #565d7a;

  /* --- UI --- */
  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(109, 94, 248, 0.42);
  --shadow-glow:     0 0 40px rgba(109, 94, 248, 0.18);
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.45);

  /* --- 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.35rem, 4.8vw, 3.85rem);
  --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;
}