@import "tailwindcss";

/*
 * Aura+ design tokens.
 * Every color, radius and shadow used in components should come from here,
 * so the whole product can be re-themed from one place.
 */
@theme inline {
  --font-sans: var(--font-jakarta), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@theme {
  /* Dark surfaces (hero, CTA, footer, dark cards) */
  --color-night-950: #040812;
  --color-night-900: #070D1C;
  --color-night-800: #0C1428;
  --color-night-700: #141E38;

  /* Light surfaces */
  --color-canvas: #F5F6FA;
  --color-surface: #FFFFFF;
  --color-line: #E7E9F0;
  --color-line-strong: #D5D9E3;

  /* Text */
  --color-ink: #0B1222;
  --color-ink-soft: #3A4255;
  --color-muted: #6B7285;
  --color-subtle: #9AA0B0;

  /* Accent */
  --color-accent: #5B6CFF;
  --color-accent-soft: #EEF0FF;

  /* Five elements */
  --color-wood: #3FA36B;
  --color-fire: #E0505B;
  --color-earth: #E2A33B;
  --color-metal: #B3B9C6;
  --color-water: #3E7BEA;

  /* Numerology accents */
  --color-num-blue: #3E7BEA;
  --color-num-violet: #8B5CF6;
  --color-num-amber: #E2A33B;

  --radius-card: 20px;
  --radius-panel: 28px;

  --shadow-card: 0 1px 2px rgba(11, 18, 34, 0.04), 0 8px 24px -8px rgba(11, 18, 34, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(11, 18, 34, 0.04), 0 20px 40px -12px rgba(11, 18, 34, 0.16);
  --shadow-float: 0 24px 64px -16px rgba(4, 8, 18, 0.35);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --animate-fade-up: fade-up 0.7s var(--ease-out-expo) both;

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    overflow-x: hidden;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 6px;
  }

  ::selection {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }
}

@utility eyebrow {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@utility no-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body {
    background: #fff;
  }
}