/* ==========================================================================
   DESIGN TOKENS — AIdetreabă
   Single source of truth for all brand colors, typography, spacing,
   and visual properties. Extracted from existing CSS — non-negotiable.
   ========================================================================== */

:root {

  /* ---- COLORS ---- */
  /* Brand (extracted from existing index.html CSS — preserved exactly) */
  --color-primary:        #5661FF;   /* brand blue-violet */
  --color-primary-dark:   #0D47A1;   /* deep navy blue */
  --color-primary-light:  #1AD6FF;   /* electric cyan */
  --color-accent:         #1AD6FF;   /* secondary brand, same as primary-light */

  /* Backgrounds */
  --color-bg:             #050713;   /* page background, near-black */
  --color-bg-surface:     #0e1016;   /* card / panel background */
  --color-bg-elevated:    #141726;   /* elevated surface, tooltips, etc. */

  /* Text */
  --color-text:           #e9ecf7;   /* primary text, off-white */
  --color-text-muted:     #c4c9d9;   /* secondary text */
  --color-text-subtle:    #8891b0;   /* tertiary, placeholders */

  /* UI Chrome */
  --color-border:         #1e2333;   /* default border */
  --color-border-soft:    #252b3f;   /* softer border for cards */
  --color-success:        #20e3b2;   /* success states, trust indicators */

  /* ---- GRADIENTS ---- */
  --gradient-brand:       linear-gradient(90deg, var(--color-primary), var(--color-accent));
  --gradient-brand-diag:  linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-brand-vert:  linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-dark:        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-surface) 100%);

  /* ---- TYPOGRAPHY ---- */
  /* Display: Plus Jakarta Sans — warm, modern, very readable at all sizes,
     widely used in B2B SaaS, approachable yet premium. Replaced Syne (too geometric). */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  /* Body: DM Sans — existing brand font, approachable, legible */
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ---- SPACING SCALE ---- */
  --space-xs:   0.375rem;  /*  6px */
  --space-sm:   0.625rem;  /* 10px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4.5rem;    /* 72px */
  --space-4xl:  6rem;      /* 96px */

  /* ---- BORDER RADIUS ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-sm:    0 2px 8px rgba(2,6,23,.3);
  --shadow-md:    0 8px 32px rgba(2,6,23,.45);
  --shadow-lg:    0 24px 80px rgba(2,6,23,.6);
  --shadow-brand: 0 8px 32px rgba(86,97,255,.35);
  --shadow-cyan:  0 8px 32px rgba(26,214,255,.2);

  /* ---- TRANSITIONS ---- */
  --ts-fast:  120ms;
  --ts-med:   220ms;
  --ts-slow:  420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in:  cubic-bezier(.76, 0, .24, 1);
}