@import "tailwindcss";

:root {
  /* Brand Colors — refined, deeper palette */
  --brand: #0A84FF;
  --brand-hover: #0070E0;
  --brand-light: #EFF6FF;
  --brand-deep: #021643;
  --brand-700: #0B3A9C;
  --brand-900: #020E2E;
  --brand-glow: rgba(10, 132, 255, 0.18);

  /* Neutrals — warmer, more readable */
  --dark-navy: #071426;
  --dark-surface: #0E1D34;
  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --ink: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --line: #E2E8F0;
  --tint: #EFF6FF;

  /* Feedback */
  --success: #10B981;
  --success-bg: #ECFDF5;
  --warning: #F59E0B;
  --coral: #EF4444;
  --coral-2: #F97316;
  --gold: #F59E0B;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, 0.15);
  --shadow-brand: 0 8px 32px -8px rgba(10, 132, 255, 0.4);
  --shadow-brand-lg: 0 20px 60px -15px rgba(10, 132, 255, 0.5);

  /* Layout */
  --radius: 16px;
}

@theme inline {
  /* Colors */
  --color-brand: #0A84FF;
  --color-brand-hover: #0070E0;
  --color-brand-light: #EFF6FF;
  --color-brand-deep: #021643;
  --color-brand-700: #0B3A9C;
  --color-brand-900: #020E2E;
  --color-dark-navy: #071426;
  --color-dark-surface: #0E1D34;
  --color-background: #F8FAFC;
  --color-bg-alt: #F1F5F9;
  --color-ink: #0F172A;
  --color-secondary: #475569;
  --color-muted: #64748B;
  --color-border: #E2E8F0;
  --color-tint: #EFF6FF;
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;
  --color-coral: #EF4444;
  --color-coral-2: #F97316;
  --color-gold: #F59E0B;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 999px;
}

/* ─── Base Styles ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* ─── Selection ────────────────────────────────────────────────── */
::selection {
  background: rgba(10, 132, 255, 0.2);
  color: var(--ink);
}

/* ─── Smooth transitions on all interactive elements ───────────── */
a, button, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ─── Scroll reveal ────────────────────────────────────────────── */
/* Visible is the default. `.reveal-hidden` is added by the Reveal component only
   after it has confirmed the element is below the fold, and it is always removed
   again — by the observer, or by a failsafe timer. Nothing can be left invisible. */
.reveal {
  transition: opacity 700ms cubic-bezier(0, 0, 0.2, 1),
    transform 700ms cubic-bezier(0, 0, 0.2, 1);
}
.reveal-hidden {
  opacity: 0;
  transform: translateY(20px);
}

@media print {
  .reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
  }
}