/**
 * AURA design tokens — DeFi Money
 * Source: teya-memory/design/AURADESIGN.md
 */

:root {
  /* Colors */
  --dm-bg: #050814;
  --dm-bg-elevated: #0a1020;
  --dm-bg-section-alt: #0b1226;
  --dm-on-bg: #f4f7fb;
  --dm-on-bg-muted: #9aa8bc;
  --dm-surface-lowest: #070b16;
  --dm-surface-low: #0e1628;
  --dm-surface-container: rgba(16, 24, 48, 0.72);
  --dm-surface-high: rgba(28, 40, 72, 0.88);
  --dm-surface-glass: rgba(14, 22, 44, 0.55);
  --dm-primary: #22d3ee;
  --dm-primary-hover: #67e8f9;
  --dm-primary-pressed: #06b6d4;
  --dm-on-primary: #041018;
  --dm-secondary: #8b5cf6;
  --dm-secondary-hover: #a78bfa;
  --dm-on-secondary: #ffffff;
  --dm-tertiary: #34d399;
  --dm-tertiary-muted: #10b981;
  --dm-on-tertiary: #04140f;
  --dm-accent-amber: #f59e0b;
  --dm-accent-magenta: #e879f9;
  --dm-outline: rgba(34, 211, 238, 0.28);
  --dm-outline-variant: rgba(148, 163, 184, 0.18);
  --dm-outline-strong: rgba(139, 92, 246, 0.45);
  --dm-error: #f87171;
  --dm-on-error: #1a0505;
  --dm-warning: #fbbf24;
  --dm-success: #34d399;
  --dm-glow-cyan: rgba(34, 211, 238, 0.45);
  --dm-glow-violet: rgba(139, 92, 246, 0.4);
  --dm-glow-emerald: rgba(52, 211, 153, 0.35);
  --dm-token-ibs: #22d3ee;
  --dm-token-pots: #a78bfa;

  --dm-gradient-hero: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(34, 211, 238, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(139, 92, 246, 0.16) 0%, transparent 50%),
    linear-gradient(180deg, #050814 0%, #0a1020 100%);
  --dm-gradient-cta-primary: linear-gradient(135deg, #22d3ee 0%, #38bdf8 45%, #8b5cf6 100%);
  --dm-gradient-text-accent: linear-gradient(90deg, #22d3ee 0%, #a78bfa 100%);

  /* Typography */
  --dm-font-display: "Exo 2", system-ui, sans-serif;
  --dm-font-body: "Manrope", system-ui, sans-serif;
  --dm-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --dm-fs-display-xl: clamp(2.5rem, 5vw, 4rem);
  --dm-fs-display-lg: clamp(2rem, 4vw, 3rem);
  --dm-fs-headline-lg: clamp(1.75rem, 3vw, 2.25rem);
  --dm-fs-headline-md: 1.75rem;
  --dm-fs-headline-sm: 1.375rem;
  --dm-fs-body-lg: 1.125rem;
  --dm-fs-body-md: 1rem;
  --dm-fs-body-sm: 0.875rem;
  --dm-fs-label-lg: 0.875rem;
  --dm-fs-label-sm: 0.75rem;

  /* Spacing */
  --dm-space-unit: 8px;
  --dm-section-y: 120px;
  --dm-section-y-tablet: 88px;
  --dm-section-y-mobile: 64px;
  --dm-container-max: 1200px;
  --dm-gutter: 24px;
  --dm-gutter-mobile: 16px;
  --dm-stack-tight: 12px;
  --dm-stack-default: 24px;
  --dm-stack-loose: 40px;

  /* Radii */
  --dm-radius-sm: 8px;
  --dm-radius-md: 12px;
  --dm-radius-lg: 16px;
  --dm-radius-xl: 24px;
  --dm-radius-pill: 9999px;
  --dm-radius-card: 16px;
  --dm-radius-glass: 20px;

  /* Elevation */
  --dm-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --dm-shadow-card: 0 12px 40px rgba(2, 8, 24, 0.55);
  --dm-shadow-glow-button: 0 0 24px rgba(34, 211, 238, 0.45), 0 0 48px rgba(139, 92, 246, 0.25);
  --dm-shadow-glow-soft: 0 0 60px rgba(34, 211, 238, 0.15);

  /* Motion durations (hooks; IMPLEMENT owns timelines) */
  --dm-dur-micro: 180ms;
  --dm-dur-ui: 320ms;
  --dm-dur-section: 700ms;
  --dm-dur-scene: 1200ms;

  /* Header */
  --dm-header-h: 72px;
}

@media (max-width: 1024px) {
  :root {
    --dm-section-y: var(--dm-section-y-tablet);
  }
}

@media (max-width: 768px) {
  :root {
    --dm-section-y: var(--dm-section-y-mobile);
    --dm-gutter: var(--dm-gutter-mobile);
  }
}