/* ============================================================
   Baaxapp · Design Tokens · v1.0
   Single source of truth for color, type, spacing, radii, shadow.
   Paste into your stylesheet root, or @import this file.
   ============================================================ */

:root {
  /* ---------- Color · Night (dark surfaces) ---------- */
  --baax-night-deep: #0A1628;   /* App background */
  --baax-night-base: #0D1F3C;   /* Sidebar / hero */
  --baax-surface-1:  #132947;   /* Card surface */
  --baax-surface-2:  #1A3558;   /* Elevated surface */
  --baax-border:     #24496E;   /* Divider, hairline */

  /* ---------- Color · Electric Maya (brand accent) ---------- */
  --baax-jade:       #00E5A0;   /* Primary CTA · brand */
  --baax-jade-deep:  #00B87A;   /* Hover · pressed */
  --baax-jade-tint:  #E8FBF5;   /* Subtle highlight on light */

  /* ---------- Color · Spark (energy) ---------- */
  --baax-volt:       #CAFF4D;   /* Live · scoreboard · badge */
  --baax-volt-deep:  #A6D630;   /* Hover · pressed */
  --baax-volt-tint:  #F5FFD6;

  /* ---------- Color · Neutrals ---------- */
  --baax-white:      #FFFFFF;
  --baax-cool-50:    #F0F4F8;
  --baax-gray-300:   #8FA5BC;   /* Disabled · caption */
  --baax-gray-600:   #526070;   /* Body on light */
  --baax-gray-900:   #1E2D3E;   /* Headings on light */

  /* ---------- Color · Semantic ---------- */
  --baax-success:    #16C77A;
  --baax-warning:    #FFB547;
  --baax-error:      #FF5C6C;
  --baax-info:       #4DA8FF;

  /* ---------- Gradients ---------- */
  --baax-gradient-brand:    linear-gradient(135deg, #00E5A0 0%, #00A8E5 100%);
  --baax-gradient-vertical: linear-gradient(180deg, #00E5A0 0%, #1ECDC6 55%, #00A8E5 100%);

  /* ---------- Type · Families ---------- */
  --baax-font-display: "Sora", system-ui, -apple-system, sans-serif;
  --baax-font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --baax-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type · Scale (px) ---------- */
  --baax-text-display-xl: 72px;   /* line-height 1.05 */
  --baax-text-display:    56px;   /* line-height 1.05 */
  --baax-text-h1:         40px;   /* line-height 1.1  */
  --baax-text-h2:         28px;   /* line-height 1.2  */
  --baax-text-h3:         20px;   /* line-height 1.3  */
  --baax-text-body-lg:    18px;   /* line-height 1.55 */
  --baax-text-body:       15px;   /* line-height 1.6  */
  --baax-text-caption:    12px;   /* line-height 1.4  */

  /* ---------- Type · Weights ---------- */
  --baax-weight-light:    300;
  --baax-weight-regular:  400;
  --baax-weight-medium:   500;
  --baax-weight-semibold: 600;
  --baax-weight-bold:     700;
  --baax-weight-black:    800;

  /* ---------- Spacing (4px base) ---------- */
  --baax-space-1:  4px;
  --baax-space-2:  8px;
  --baax-space-3:  12px;
  --baax-space-4:  16px;
  --baax-space-5:  20px;
  --baax-space-6:  24px;
  --baax-space-8:  32px;
  --baax-space-10: 40px;
  --baax-space-12: 48px;
  --baax-space-16: 64px;
  --baax-space-20: 80px;
  --baax-space-24: 96px;
  --baax-space-32: 128px;

  /* ---------- Radius ---------- */
  --baax-radius-sm:    6px;
  --baax-radius-md:    10px;
  --baax-radius-lg:    16px;
  --baax-radius-xl:    20px;
  --baax-radius-2xl:   28px;
  --baax-radius-pill:  9999px;

  /* ---------- Shadow (on dark) ---------- */
  --baax-shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --baax-shadow-md: 0 6px 18px rgba(0,0,0,0.35);
  --baax-shadow-lg: 0 20px 48px rgba(0,0,0,0.45);
  --baax-shadow-glow: 0 8px 32px rgba(0, 229, 160, 0.25);

  /* ---------- Motion ---------- */
  --baax-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --baax-ease-in:    cubic-bezier(0.32, 0, 0.67, 0);
  --baax-ease-snap:  cubic-bezier(0.6, 0.04, 0.2, 1.2);
  --baax-dur-fast:   120ms;
  --baax-dur-base:   220ms;
  --baax-dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --baax-container-max: 1240px;
  --baax-container-pad: 56px;
  --baax-sidebar-w:     264px;
}

/* ---------- Optional · Helper classes ---------- */
.baax-text-gradient {
  background: var(--baax-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.baax-focus-ring:focus-visible {
  outline: 2px solid var(--baax-jade);
  outline-offset: 2px;
}