@import "tailwindcss";

/*
 * NAC colours, taken from the college logo and the previous website:
 *   blue  #1673A8 (brand-600)   light blue #3FABD7 (brand-400)
 *   gold  #978347 (gold-500)    light gold #C5AF5C (gold-400)
 * The other steps are lighter and darker shades of the same colours.
 */
@theme {
  --font-sans: var(--font-sans-family), ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-logo: var(--font-logo-family), Georgia, "Times New Roman", serif;

  /* Colour names used by the previous website (same brand colours). */
  --color-primary: #978347;
  --color-primary2: #3fabd7;
  --color-sec: #1673a8;
  --color-sec2: #c5af5c;
  --color-blend1: #3fabd7;
  --color-blend2: #c5af5c;
  --color-blend3: #aacc61;
  --color-blend4: #e6b772;

  --animate-blink: blink 1s step-end infinite;

  --color-brand-50: #eef7fc;
  --color-brand-100: #d6ecf7;
  --color-brand-200: #aed8ee;
  --color-brand-300: #7cc1e4;
  --color-brand-400: #3fabd7;
  --color-brand-500: #2b8fc4;
  --color-brand-600: #1673a8;
  --color-brand-700: #125e8a;
  --color-brand-800: #0f4a6c;
  --color-brand-900: #0b3752;
  --color-brand-950: #07233a;

  --color-gold-50: #faf7ee;
  --color-gold-100: #f2ebd3;
  --color-gold-200: #e4d6a6;
  --color-gold-300: #d4c07c;
  --color-gold-400: #c5af5c;
  --color-gold-500: #978347;
  --color-gold-600: #7d6c3a;
  --color-gold-700: #63552e;
  --color-gold-800: #4a4023;
  --color-gold-900: #332c18;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Full-width sections with the side spacing of the previous website. */
@utility pad {
  padding-left: 5%;
  padding-right: 5%;
  @media (width >= 64rem) {
    padding-left: 7%;
    padding-right: 7%;
  }
}

/* The rounded corners used across the previous website. */
@utility rr {
  border-radius: 11px;
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
    @media (width >= 64rem) {
      scroll-padding-top: 140px;
    }
  }
  :focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
  [hidden] {
    display: none !important;
  }
}