@import "tailwindcss";

@import "./typography.css";
@import "./navigation.css";
@import "./components.css";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@theme {

  --font-character: tiempos, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-content: soehne, Helvetica, Arial, Roboto, ui-sans-serif, system-ui, -apple-system, sans-serif;

  --color-whenua-100: #d4d1cc;
  --color-whenua-200: #a9a499;
  --color-whenua-300: #7e7766;
  --color-whenua-400: #534a32;
  --color-whenua-500: #291d00;

  --color-golden-bay-100: #ffe7cc;
  --color-golden-bay-200: #ffcf99;
  --color-golden-bay-300: #ffb766;
  --color-golden-bay-400: #ff9f32;
  --color-golden-bay-500: #ff8700;
  --color-golden-bay-600: #cc6c00;
  --color-golden-bay-700: #995100;
  --color-golden-bay-800: #663600;
  --color-golden-bay-900: #331b00;

  --color-ruby-bay-100: #ffd2da;
  --color-ruby-bay-200: #ffa5b6;
  --color-ruby-bay-300: #ff7991;
  --color-ruby-bay-400: #ff4c6d;
  --color-ruby-bay-500: #ff2049;
  --color-ruby-bay-600: #cc193a;
  --color-ruby-bay-700: #99132b;
  --color-ruby-bay-800: #660c1d;
  --color-ruby-bay-900: #33060e;

  --color-abel-tasman-100: #cce4ff;
  --color-abel-tasman-200: #99c9ff;
  --color-abel-tasman-300: #66aeff;
  --color-abel-tasman-400: #3293ff;
  --color-abel-tasman-500: #0078ff;
  --color-abel-tasman-600: #0060cc;
  --color-abel-tasman-700: #004899;
  --color-abel-tasman-800: #003066;
  --color-abel-tasman-900: #001833;

  --color-kakariki-100: #d4eacf;
  --color-kakariki-200: #aed9a7;
  --color-kakariki-300: #88c87f;
  --color-kakariki-400: #62b757;
  --color-kakariki-500: #2b9913;
  --color-kakariki-600: #248c11;
  --color-kakariki-700: #1d7f0f;
  --color-kakariki-800: #16720d;
  --color-kakariki-900: #0a640e;

}

body {
  @apply font-content font-normal text-whenua-500;
  background: #F6F5F2;
}

@media print {
  /* Prevent page breaks inside important elements */
  section, table, tr, img {
    break-inside: avoid;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Scale all fonts to be smaller */
  html {
    font-size: 80%;
  }

  body {
    background: #fff;
  }
}