xpeditis2.0/apps/frontend/app/globals.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body;
  }

  /* Apply Manrope to all headings */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  h1 { @apply text-h1 text-brand-navy; }
  h2 { @apply text-h2 text-brand-navy; }
  h3 { @apply text-h3 text-neutral-800; }
  h4 { @apply text-h4 text-neutral-800; }
  h5 { @apply text-h5 text-neutral-700; }
  h6 { @apply text-h6 text-neutral-700; }
}

@layer components {
  /* Button styles with Xpeditis branding */
  .btn-primary {
    @apply bg-accent text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-accent/90 transition-colors shadow-sm hover:shadow;
  }

  .btn-secondary {
    @apply bg-primary text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-800 transition-colors shadow-sm hover:shadow;
  }

  .btn-success {
    @apply bg-success text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-success-dark transition-colors shadow-sm hover:shadow;
  }

  .btn-outline {
    @apply border-2 border-primary text-primary font-heading font-semibold px-6 py-3 rounded-lg hover:bg-primary hover:text-white transition-colors;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .card-header {
    @apply font-heading font-semibold text-h4 text-brand-navy mb-4;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-label font-body;
  }

  .badge-success {
    @apply badge bg-success/10 text-success;
  }

  .badge-info {
    @apply badge bg-accent/10 text-accent;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-800;
  }

  /* Link styles */
  .link {
    @apply text-accent hover:text-accent/80 transition-colors underline-offset-2 hover:underline;
  }

  /* Form elements */
  .input {
    @apply border border-neutral-300 rounded-lg px-4 py-2.5 font-body text-body focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors;
  }

  .label {
    @apply text-label text-neutral-600 font-body font-semibold mb-1.5 block uppercase tracking-wider;
  }

  /* Container with brand background */
  .section-navy {
    @apply bg-brand-navy text-white py-16;
  }

  .section-light {
    @apply bg-brand-gray py-16;
  }
}

/* TipTap editor styles */
.tiptap p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.tiptap img.ProseMirror-selectednode {
  outline: 3px solid #34CCCD;
}

/* Prose typography overrides for brand colors */
.prose a {
  color: #34CCCD;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: #10183A;
  font-family: var(--font-manrope), Manrope, sans-serif;
}
.prose blockquote {
  border-left-color: #34CCCD;
}
.prose code {
  background-color: #f3f4f6;
  color: #10183A;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
.prose pre {
  background-color: #10183A;
  color: #e5e7eb;
}