/* Jarat corporate brand for the Discovery Hub.
   Alex, 3 Sep: "the look and feel, logos and colours need to be in line with our
   current website, and the corporate branding, logos, colours and fonts as in
   Jarat_2020_STYLE_GUIDE.pdf."

   The Hub was on #1a2332 / #0B1F3F / #1E40AF with a #D4AF37 gold, and set in
   Cormorant Garamond, Sacramento and Inter. None of those is Jarat's. The five
   swatches below are the style guide's colour profile; the faces are Gotham and
   Anjel Script, the ones jarattours.co.za serves. */

@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Light.woff2')  format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Book.woff2')   format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Bold.woff2')   format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Anjel Script'; src: url('/fonts/AnjelScript.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* The style guide's colour profile, in order. */
  --jarat-navy:      #1f2533;
  --jarat-navy-deep: #1f2533;
  --jarat-navy-2:    #2e3649;
  --jarat-steel:     #4a5c6f;
  --jarat-mist:      #8ba5be;
  --jarat-sand:      #f4f4f2;

  /* The Hub's own names, remapped onto the brand rather than left off-palette. */
  --jarat-blue: #4a5c6f;
  --jarat-gold: #8ba5be;
  --slate-50:  #f4f4f2;
  --slate-100: #eceae4;
  --slate-200: rgba(31,37,51,.12);
  --slate-300: rgba(31,37,51,.22);
  --slate-400: rgba(31,37,51,.45);
  --slate-500: rgba(31,37,51,.6);
  --slate-600: rgba(31,37,51,.75);

  /* Headings and body are both Gotham: bold uppercase for headings, light for
     body. Anjel Script is signature use only. */
  --sans:   'Gotham', system-ui, -apple-system, sans-serif;
  --serif:  'Gotham', system-ui, -apple-system, sans-serif;
  --script: 'Anjel Script', cursive;
}

body { font-family: var(--sans); font-weight: 300; }
h1, h2, h3, .brand-heading { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; }