AnchorOS/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --bone-white: #F6F1EC;
    --soft-cream: #EFE7DE;
    --mocha-taupe: #B8A89A;
    --deep-earth: #6F5E4F;
    --charcoal-brown: #3F362E;

    --ivory-cream: #FFFEF9;
    --sand-beige: #E8E4DD;
    --forest-green: #2E8B57;
    --clay-orange: #D2691E;
    --brick-red: #B22222;
    --slate-blue: #6A5ACD;

    --forest-green-alpha: rgba(46, 139, 87, 0.1);
    --clay-orange-alpha: rgba(210, 105, 30, 0.1);
    --brick-red-alpha: rgba(178, 34, 34, 0.1);
    --slate-blue-alpha: rgba(106, 90, 205, 0.1);
    --charcoal-brown-alpha: rgba(63, 54, 46, 0.1);

    /* Aperture - Square UI */
    --ui-primary: #006AFF;
    --ui-primary-hover: #005ED6;
    --ui-primary-light: #E6F0FF;

    --ui-bg: #F6F8FA;
    --ui-bg-card: #FFFFFF;
    --ui-bg-hover: #F3F4F6;

    --ui-border: #E1E4E8;
    --ui-border-light: #F3F4F6;

    --ui-text-primary: #24292E;
    --ui-text-secondary: #586069;
    --ui-text-tertiary: #8B949E;
    --ui-text-inverse: #FFFFFF;

    --ui-success: #28A745;
    --ui-success-light: #D4EDDA;

    --ui-warning: #DBAB09;
    --ui-warning-light: #FFF3CD;

    --ui-error: #D73A49;
    --ui-error-light: #F8D7DA;

    --ui-info: #0366D6;
    --ui-info-light: #CCE5FF;

    --ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08);
    --ui-shadow-md: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    --ui-shadow-lg: 0 8px 24px rgba(0,0,0,0,16), 0 4px 6px rgba(0,0,0,0.08);
    --ui-shadow-xl: 0 20px 25px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.08);

    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
    --ui-radius-lg: 8px;
    --ui-radius-xl: 12px;
    --ui-radius-2xl: 16px;
    --ui-radius-full: 9999px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Font sizes */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;  /* 20px */
    --text-2xl: 1.5rem;  /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;  /* 36px */
    --text-5xl: 3rem;        /* 48px */
  }

  body {
    color: var(--charcoal-brown);
    background: var(--bone-white);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }
}

@layer components {
  .booking-header {
    @apply fixed top-0 left-0 right-0 z-50;
    background: var(--bone-white);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mocha-taupe);
  }

  .booking-nav {
    @apply max-w-7xl mx-auto px-8 py-4 flex items-center justify-between;
  }

  .booking-nav .logo a {
    @apply text-xl tracking-tight hover:opacity-80 transition-opacity;
    color: var(--charcoal-brown);
  }

  .booking-nav .nav-actions {
    @apply flex items-center gap-4;
  }

  .nav-primary {
    @apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between;
  }

  .logo a {
    @apply text-2xl tracking-tight hover:opacity-80 transition-opacity;
    color: var(--charcoal-brown);
  }

  .nav-links {
    @apply hidden md:flex items-center space-x-12;
  }

  .nav-links a {
    @apply hover:opacity-70 transition-opacity font-medium;
    color: var(--charcoal-brown);
  }

  .nav-actions {
    @apply flex items-center;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
    background: var(--deep-earth);
    color: var(--bone-white);
    border-color: var(--deep-earth);
  }
  
  .btn-primary:hover {
    opacity: 0.85;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
    background: var(--soft-cream);
    color: var(--charcoal-brown);
    border-color: var(--mocha-taupe);
  }
  
  .btn-secondary:hover {
    background: var(--mocha-taupe);
  }

  .hero {
    @apply min-h-screen flex items-center justify-center pt-24;
    background: var(--bone-white);
  }

  .hero-content {
    @apply max-w-7xl mx-auto px-8 text-center;
  }

  .logo-mark {
    @apply w-24 h-24 mx-auto mb-12;
    color: var(--charcoal-brown);
  }

  .hero h1 {
    @apply text-7xl md:text-9xl mb-6 tracking-tight;
    color: var(--charcoal-brown);
  }

  .hero h2 {
    @apply text-2xl md:text-3xl mb-8;
    color: var(--charcoal-brown);
    opacity: 0.85;
  }

  .hero p {
    @apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.7;
  }

  .hero-actions {
    @apply flex items-center justify-center gap-6 flex-wrap;
  }

  .hero-image {
    @apply mt-16 rounded-2xl overflow-hidden;
    background: var(--soft-cream);
  }

  .foundation {
    @apply max-w-7xl mx-auto px-8 py-32 grid md:grid-cols-2 gap-16 items-center;
  }

  .foundation article {
    @apply space-y-8;
  }

  .foundation h3 {
    @apply text-sm font-semibold tracking-widest uppercase mb-4;
    color: var(--mocha-taupe);
  }

  .foundation h4 {
    @apply text-4xl md:text-5xl mb-6;
    color: var(--charcoal-brown);
  }

  .foundation p {
    @apply text-xl leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.85;
  }

  .foundation-image {
    @apply rounded-2xl overflow-hidden h-96;
    background: var(--soft-cream);
  }

  .services-preview {
    @apply max-w-7xl mx-auto px-8 py-32;
  }

  .services-preview h3 {
    @apply text-4xl md:text-5xl mb-16 text-center;
    color: var(--charcoal-brown);
  }

  .service-cards {
    @apply grid md:grid-cols-3 gap-12 mb-16;
  }

  .service-card {
    @apply p-10 rounded-2xl transition-shadow;
    background: var(--soft-cream);
  }

  .service-card h4 {
    @apply text-2xl mb-6;
    color: var(--charcoal-brown);
  }

  .service-card p {
    color: var(--charcoal-brown);
    opacity: 0.8;
  }

  .testimonials {
    @apply max-w-7xl mx-auto px-8 py-32 rounded-3xl mb-12;
    background: var(--soft-cream);
  }

  .testimonials h3 {
    @apply text-4xl md:text-5xl mb-16 text-center;
    color: var(--charcoal-brown);
  }

  .testimonial-grid {
    @apply grid md:grid-cols-2 gap-12 mb-16;
  }

  .testimonial {
    @apply p-10 rounded-2xl;
    background: var(--bone-white);
  }

  .testimonial .stars {
    @apply text-2xl mb-6;
    color: var(--mocha-taupe);
  }

  .testimonial p {
    @apply text-xl mb-6 italic leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.85;
  }

  .testimonial cite {
    @apply font-semibold not-italic block;
    color: var(--charcoal-brown);
  }

  .site-footer {
    @apply py-16;
    background: var(--charcoal-brown);
  }

  .site-footer a {
    @apply hover:opacity-70 transition-opacity;
    color: var(--mocha-taupe);
  }

  .footer-brand {
    @apply max-w-7xl mx-auto px-8 mb-12;
  }

  .footer-brand span {
    @apply text-2xl block mb-3;
    color: var(--bone-white);
  }

  .footer-brand p {
    color: var(--mocha-taupe);
  }

  .footer-links {
    @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
  }

  .footer-legal {
    @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
  }

  .footer-contact {
    @apply max-w-7xl mx-auto px-8 flex flex-wrap gap-8;
    color: var(--mocha-taupe);
  }

  .section {
    @apply py-32;
  }

  .section-header {
    @apply max-w-7xl mx-auto px-8 mb-16;
  }

  .section-title {
    @apply text-4xl md:text-5xl mb-6;
    color: var(--charcoal-brown);
  }

  .section-subtitle {
    @apply text-xl max-w-2xl leading-relaxed;
    color: var(--charcoal-brown);
    opacity: 0.8;
  }

  .select-content {
    background: var(--bone-white);
    border: 1px solid var(--mocha-taupe);
  }

  .select-item {
    color: var(--charcoal-brown);
    transition: background 0.15s;
  }

  .select-item:hover,
  .select-item[data-highlighted] {
    background: var(--soft-cream);
  }

  .select-item[data-state="checked"] {
    background: var(--soft-cream);
    font-weight: 500;
  }

  .select-trigger {
    background: var(--bone-white);
    border: 1px solid var(--mocha-taupe);
    color: var(--charcoal-brown);
  }

  .select-trigger:hover {
    border-color: var(--deep-earth);
  }

  .select-trigger[data-state="open"] {
    border-color: var(--deep-earth);
  }
}