MOPC-App/src/app/globals.css

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import "tailwindcss";

/* Source the JS config for extended theme values */
@config "../../tailwind.config.ts";

/* Theme variables - using CSS custom properties with Tailwind v4 @theme */
@theme {
  /* Container */
  --container-2xl: 1400px;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Font families */
  --font-sans: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Custom font sizes */
  --text-display-lg: 3rem;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--font-weight: 700;

  --text-display: 2.25rem;
  --text-display--line-height: 1.2;
  --text-display--font-weight: 700;

  --text-heading: 1.5rem;
  --text-heading--line-height: 1.3;
  --text-heading--font-weight: 600;

  --text-subheading: 1.125rem;
  --text-subheading--line-height: 1.4;
  --text-subheading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;

  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-small--font-weight: 400;

  --text-tiny: 0.75rem;
  --text-tiny--line-height: 1.5;
  --text-tiny--font-weight: 400;

  /* Brand colors */
  --color-brand-red: #de0f1e;
  --color-brand-red-hover: #c00d1a;
  --color-brand-red-light: #fee2e2;
  --color-brand-blue: #053d57;
  --color-brand-blue-light: #0a5a7c;
  --color-brand-teal: #557f8c;
  --color-brand-teal-light: #6a9aa8;

  /* Keyframes */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.2s ease-out;
  --animate-fade-out: fade-out 0.2s ease-out;
  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-in-from-top {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@layer base {
  :root {
    /* MOPC Brand Colors - mapped to shadcn/ui variables */
    --background: 0 0% 99.5%;
    --foreground: 220 13% 18%;

    --card: 0 0% 100%;
    --card-foreground: 220 13% 18%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 13% 18%;

    /* Primary - MOPC Red */
    --primary: 354 90% 47%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - Warm gray */
    --secondary: 30 6% 96%;
    --secondary-foreground: 220 13% 18%;

    --muted: 30 6% 96%;
    --muted-foreground: 220 8% 46%;

    /* Accent - Light teal tint for hover states */
    --accent: 194 30% 94%;
    --accent-foreground: 220 13% 18%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 6% 91%;
    --input: 30 6% 91%;
    --ring: 220 9% 76%;

    --radius: 0.5rem;

    /* Semantic colors */
    --success: 142 76% 36%;
    --warning: 38 92% 50%;
    --info: 194 25% 44%;
  }

  .dark {
    --background: 220 15% 8%;
    --foreground: 0 0% 98%;

    --card: 220 15% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 220 15% 10%;
    --popover-foreground: 0 0% 98%;

    --primary: 354 90% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 15% 18%;
    --muted-foreground: 0 0% 64%;

    --accent: 194 20% 18%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 22%;
    --input: 220 15% 22%;
    --ring: 220 10% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground overflow-x-hidden;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

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

  /* Focus styles */
  *:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  .leaflet-container:focus,
  .leaflet-container:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    ring: none;
    --tw-ring-shadow: none;
    --tw-ring-offset-shadow: none;
  }

  /* Selection color */
  ::selection {
    @apply bg-primary/20 text-foreground;
  }
}

@layer utilities {
  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Text balance for better typography */
  .text-balance {
    text-wrap: balance;
  }

  /* Animation utilities */
  .animate-in {
    animation: fade-in 0.2s ease-out, slide-in-from-bottom 0.3s ease-out;
  }

  /* Container for admin/jury views */
  .container-app {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
}

/* Custom scrollbar for non-hidden areas */
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }
}