frontend/src/app/globals.css

@import "tailwindcss";

:root {
  /* RE-Quest Design Tokens */
  --color-primary-dark: #00293d;
  --color-primary-light: #c4d9d4;
  --color-accent-orange: #f5a623;
  --color-accent-orange-hover: #e09620;
  --color-background: #ffffff;
  --color-background-alt: #f5f9f8;
  --color-foreground: #171717;
  --color-text-gray: #666666;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;

  /* Spacing */
  --spacing-section: 6rem;
  --spacing-section-sm: 4rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@theme inline {
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-serif: var(--font-source-serif-4);
  --font-fractul: var(--font-fractul);
}

/* Disable dark mode for consistent branding */
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Custom utilities */
.section-padding {
  padding-top: var(--spacing-section-sm);
  padding-bottom: var(--spacing-section-sm);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
  }
}

/* Gradient backgrounds */
.gradient-hero {
  background: linear-gradient(to bottom, #e8f0ee, #f5f9f8);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Focus states */
.focus-ring {
  outline: none;
}

.focus-ring:focus {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary-dark);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection styling */
::selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}