/* src/app/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');

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

:root {
    --bg-green: #063B25;
    --deeper-green: #032A1A;
    --card-green: #164B35;
    --accent: #FF7628;
    --white: #FFFFFF;
    --soft-text: #D7E3DC;
    --muted-grey: #8EA398;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* Semantic maps */
    --bg: var(--deeper-green);
    --fg: var(--white);
    --card: var(--card-green);
    --border: rgba(215, 227, 220, 0.15);
    --muted: var(--muted-grey);
    --brand: var(--accent);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
    font-family: var(--font-body);
    background-color: var(--deeper-green);
    color: var(--white);
}

body {
    font-family: var(--font-body);
    background-color: var(--deeper-green);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--white);
}

img {
    max-width: 100%;
    display: block;
}

button,
select,
a {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.text-accent {
    color: var(--accent);
}

/* Repeated dark green African-inspired geometric pattern background */
.global-pattern-overlay {
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(45deg, #063B25 25%, transparent 25%), 
        linear-gradient(-45deg, #063B25 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #063B25 75%), 
        linear-gradient(-45deg, transparent 75%, #063B25 75%);
    background-size: 30px 30px;
    background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ── Components ────────────────────────────────────────────────────────── */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold
           transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500
           disabled:opacity-50 disabled:pointer-events-none;
    font-family: var(--font-body);
  }

  .btn-primary {
    @apply btn bg-[#FF7628] text-white hover:bg-[#e55a13] hover:-translate-y-0.5 active:bg-[#be460e] shadow-md hover:shadow-lg;
  }

  .btn-secondary {
    @apply btn bg-[#164B35] text-white border border-[rgba(215,227,220,0.2)] hover:bg-[#205e43] hover:-translate-y-0.5 active:bg-[#0c3121] shadow-md;
  }

  .btn-ghost {
    @apply btn text-[#D7E3DC] hover:bg-[#063B25]/50 active:bg-[#063B25];
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-sm;
  }

  .card {
    @apply bg-[#164B35] rounded-2xl border border-[rgba(215,227,220,0.12)] shadow-card transition-all duration-200;
  }

  .card:hover {
    @apply shadow-card-hover border-[rgba(215,227,220,0.25)];
  }

  .input {
    @apply w-full rounded-xl border border-[rgba(215,227,220,0.2)] bg-[#032A1A] px-4 py-2.5 text-sm
           text-white placeholder:text-[#8EA398]
           focus:outline-none focus:ring-2 focus:ring-[#FF7628] focus:border-[#FF7628]
           transition-all duration-150;
    font-family: var(--font-body);
  }

  .label {
    @apply block text-sm font-semibold text-[#D7E3DC] mb-1.5;
    font-family: var(--font-body);
  }

  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
    font-family: var(--font-body);
  }

  .badge-green  { @apply badge bg-[#063B25] text-[#D7E3DC] border border-[rgba(215,227,220,0.2)]; }
  .badge-red    { @apply badge bg-red-950/60 text-red-300 border border-red-800/40; }
  .badge-yellow { @apply badge bg-amber-950/60 text-amber-300 border border-amber-800/40; }
  .badge-blue   { @apply badge bg-blue-950/60 text-blue-300 border border-blue-800/40; }
  .badge-gray   { @apply badge bg-[#164B35] text-[#8EA398] border border-[rgba(215,227,220,0.1)]; }
  .badge-purple { @apply badge bg-purple-950/60 text-purple-300 border border-purple-800/40; }

  .form-group {
    @apply flex flex-col gap-1.5;
  }

  .page-header {
    @apply mb-8;
  }

  .page-title {
    @apply text-3xl font-bold text-white;
    font-family: var(--font-heading);
  }

  .page-subtitle {
    @apply text-base text-[#8EA398] mt-1;
  }

  .section-title {
    @apply text-lg font-bold text-white mb-4;
    font-family: var(--font-heading);
  }
}

/* ── Print Styles ──────────────────────────────────────────────────────── */
@media print {
  nav,
  aside,
  header.site-header,
  .no-print,
  .print-hidden {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
  }

  .print-page {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    page-break-after: always;
  }

  .page-break {
    page-break-before: always;
  }

  a {
    text-decoration: none !important;
    color: inherit !important;
  }

  @page {
    size: A4;
    margin: 0;
  }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, #FF7628 0%, #be460e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #164B35 transparent;
  }
}