/* ════════════════════════════════════════════════════════════════════
   AURORA DESIGN SYSTEM — TOKENS
   One brand, two skins:
     .aurora                  → dark skin   (marketing surfaces)
     .aurora[data-skin=light] → light skin  (app / admin / data-dense)
   Components read the semantic --au-* variables, so the same markup
   works in either skin. Brand hues (--au-indigo etc.) are skin-neutral.
   ════════════════════════════════════════════════════════════════════ */

.aurora {
  /* ── Brand hues (shared across skins) ── */
  --au-indigo:  #6366F1;
  --au-violet:  #A855F7;
  --au-magenta: #EC4899;
  --au-cyan:    #3DA9FF;
  --au-aqua:    #7FE3FF;

  /* Signature gradients */
  --au-grad-brand: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
  --au-grad-text:  linear-gradient(100deg, #A855F7 0%, #EC4899 100%);
  --au-grad-swirl: conic-gradient(from 0deg at 38% 42%,
      #6366F1 0%, #A855F7 20%, #EC4899 40%, #3DA9FF 62%, #8B7CFF 82%, #6366F1 100%);

  /* ── Type ── */
  --au-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --au-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --au-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --au-font-serif:   'Instrument Serif', Georgia, serif;

  --au-text-xs:   0.78rem;
  --au-text-sm:   0.9rem;
  --au-text-base: 1rem;
  --au-text-lg:   1.2rem;
  --au-h3: clamp(1.4rem, 2.4vw, 1.9rem);
  --au-h2: clamp(2rem, 4vw, 3.2rem);
  --au-h1: clamp(2.6rem, 6vw, 4.8rem);
  --au-display: clamp(3.2rem, 9vw, 7rem);

  /* ── Radius / spacing / motion ── */
  --au-r-sm: 8px;
  --au-r-md: 14px;
  --au-r-lg: 20px;
  --au-r-pill: 999px;
  --au-gap: 24px;
  --au-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --au-speed: 0.3s;

  /* ════════ DARK SKIN (default — marketing) ════════ */
  --au-bg:            #0A0A1E;
  --au-bg-2:          #0E0B2A;
  --au-text:          #F3EFFF;
  --au-text-muted:    rgba(243, 239, 255, 0.66);
  --au-text-faint:    rgba(243, 239, 255, 0.40);
  --au-accent:        #C9A8FF;
  --au-accent-strong: #A855F7;
  --au-on-accent:     #0A0A1E;

  /* Surfaces / cards (glass) */
  --au-surface:       rgba(255, 255, 255, 0.05);
  --au-surface-solid: #130F2E;
  --au-card-bg:       rgba(255, 255, 255, 0.05);
  --au-card-border:       rgba(255, 255, 255, 0.12);
  --au-card-border-top:   rgba(255, 255, 255, 0.30);
  --au-card-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 3px rgba(0,0,0,0.38),
    0 3px 8px rgba(6,4,20,0.50),
    0 22px 44px -12px rgba(6,4,20,0.74),
    0 48px 96px -24px rgba(6,4,20,0.86);
  --au-card-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -2px 3px rgba(0,0,0,0.40),
    0 6px 14px rgba(6,4,20,0.55),
    0 32px 60px -12px rgba(6,4,20,0.80),
    0 64px 120px -24px rgba(6,4,20,0.92);

  /* Borders / lines / inputs */
  --au-border:     rgba(255, 255, 255, 0.12);
  --au-hairline:   rgba(255, 255, 255, 0.08);
  --au-input-bg:   rgba(255, 255, 255, 0.06);
  --au-input-border: rgba(255, 255, 255, 0.18);

  /* Nav (frosted) */
  --au-nav-bg: rgba(10, 10, 30, 0.30);

  /* Status */
  --au-success: #4ADE80;
  --au-warning: #FBBF24;
  --au-danger:  #FB7185;
  --au-success-bg: rgba(74, 222, 128, 0.14);
  --au-warning-bg: rgba(251, 191, 36, 0.14);
  --au-danger-bg:  rgba(251, 113, 133, 0.14);

  /* Table */
  --au-row-stripe: rgba(255, 255, 255, 0.03);
  --au-row-hover:  rgba(168, 85, 247, 0.10);

  background-color: var(--au-bg);
  color: var(--au-text);
  font-family: var(--au-font-body);
}

/* ════════ LIGHT SKIN (app / admin / data-dense) ════════ */
.aurora[data-skin="light"] {
  --au-bg:            #F4F2FB;
  --au-bg-2:          #ECE9F8;
  --au-text:          #1A1330;
  --au-text-muted:    rgba(26, 19, 48, 0.62);
  --au-text-faint:    rgba(26, 19, 48, 0.40);
  --au-accent:        #7C3AED;
  --au-accent-strong: #7C3AED;
  --au-on-accent:     #FFFFFF;

  --au-surface:       #FFFFFF;
  --au-surface-solid: #FFFFFF;
  --au-card-bg:       #FFFFFF;
  --au-card-border:       rgba(26, 19, 48, 0.10);
  --au-card-border-top:   rgba(255, 255, 255, 1);
  --au-card-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(26,19,48,0.06),
    0 10px 24px -8px rgba(46,28,90,0.14),
    0 28px 60px -24px rgba(46,28,90,0.18);
  --au-card-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(26,19,48,0.08),
    0 18px 36px -8px rgba(46,28,90,0.20),
    0 44px 84px -24px rgba(46,28,90,0.24);

  --au-border:     rgba(26, 19, 48, 0.12);
  --au-hairline:   rgba(26, 19, 48, 0.08);
  --au-input-bg:   #FFFFFF;
  --au-input-border: rgba(26, 19, 48, 0.20);

  --au-nav-bg: rgba(255, 255, 255, 0.70);

  --au-success: #16A34A;
  --au-warning: #B45309;
  --au-danger:  #DC2626;
  --au-success-bg: rgba(22, 163, 74, 0.12);
  --au-warning-bg: rgba(180, 83, 9, 0.12);
  --au-danger-bg:  rgba(220, 38, 38, 0.10);

  --au-row-stripe: rgba(26, 19, 48, 0.025);
  --au-row-hover:  rgba(124, 58, 237, 0.07);
}