/* ==========================================================
   Avanlabs — Design Tokens
   Single source of truth for colours, spacing, motion, type.
   ========================================================== */

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

:root {
  /* ── Brand ── */
  --brand-indigo:        #6167EE;
  --brand-indigo-hover:  #7278F5;
  --brand-indigo-press:  #4F55D6;
  --brand-indigo-soft:   rgba(97, 103, 238, 0.14);
  --brand-grad-from:     #3FC2F0;
  --brand-grad-to:       #56E1A4;
  --brand-gradient:      linear-gradient(135deg, var(--brand-grad-from) 0%, var(--brand-grad-to) 100%);

  /* Matches existing Tailwind primary (avanlabs purple) */
  --brand-primary:       #6C5CE7;
  --brand-primary-dark:  #4834D4;
  --brand-secondary:     #4ECDC4;
  --brand-accent:        #FFE66D;

  /* ── Palette – functional ── */
  --color-success:  #1FCE7C;
  --color-warning:  #F2B544;
  --color-danger:   #F25F5F;
  --color-info:     #5AC8FA;
  --color-purple:   #A66CF2;

  /* ── Surfaces – dark (3D hero / dark panels) ── */
  --surface-dark-bg:      #0a0a12;
  --surface-dark-elev1:   #16171C;
  --surface-dark-elev2:   #1D1E24;
  --surface-dark-input:   #1A1B21;
  --surface-dark-border:  rgba(255, 255, 255, 0.10);
  --surface-dark-border2: rgba(255, 255, 255, 0.06);

  /* ── Surfaces – light (main site) ── */
  --surface-light-bg:     #FFFDF7;
  --surface-light-elev:   #F7F7F9;
  --surface-light-input:  #F1F1F4;
  --surface-light-border: rgba(16, 15, 20, 0.08);
  --surface-light-border2:rgba(16, 15, 20, 0.14);

  /* ── Foreground ── */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  #C9CAD3;
  --fg-on-dark-3:  #9A9AA3;
  --fg-on-dark-4:  #6E6E78;
  --fg-on-light:   #100F14;
  --fg-on-light-2: #4B4B55;
  --fg-on-light-3: #7A7A85;
  --fg-on-light-4: #B0B0BA;

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', 'Poppins', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Radii ── */
  --r-1:   6px;
  --r-2:   8px;
  --r-3:   12px;
  --r-4:   16px;
  --r-5:   20px;
  --r-pill: 999px;
  --r-full: 50%;

  /* ── Shadows ── */
  --shadow-card:
    0 1px 2px rgba(16, 15, 20, 0.06),
    0 8px 24px rgba(16, 15, 20, 0.05);
  --shadow-fab:
    0 6px 16px rgba(97, 103, 238, 0.40);
  --shadow-panel:
    0 18px 50px rgba(0, 0, 0, 0.45);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}