@import "tailwindcss";

@theme {
  /* ===== PALETTE: Engineered Precision ===== */
  --color-primary: #1B4F72;
  --color-primary-dark: #003857;
  --color-primary-container: #1B4F72;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #92c0e9;

  --color-secondary: #A67C52;
  --color-secondary-container: #fdcb9b;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #79542d;

  --color-tertiary: #4a2f00;
  --color-tertiary-container: #674404;

  --color-background: #fef9f1;
  --color-surface: #fef9f1;
  --color-surface-bright: #fef9f1;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8f3ec;
  --color-surface-container: #f2ede6;
  --color-surface-container-high: #ece7e0;
  --color-surface-container-highest: #e7e2db;
  --color-surface-dim: #ded9d2;
  --color-surface-variant: #e7e2db;

  --color-on-surface: #1d1b17;
  --color-on-surface-variant: #41474e;
  --color-on-background: #1d1b17;

  --color-outline: #72787f;
  --color-outline-variant: #c1c7cf;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-label: 'DM Sans', sans-serif;

  /* ===== SPACING SCALE ===== */
  --spacing-section: 6rem;

  /* ===== RADIUS ===== */
  --radius-DEFAULT: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;
}

/* ===== GLOBAL RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ===== GLASS NAV ===== */
.glass-nav {
  background: rgba(254, 249, 241, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ===== HERO PATTERN ===== */
.hero-pattern {
  background-color: var(--color-background);
  background-image: radial-gradient(var(--color-surface-container-highest) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== MATERIAL SYMBOLS ===== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    animation: fadeUp 0.6s ease forwards;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

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