/*
  Rega design tokens: the colours, type and spacing of the Rega look.

  Every colour and font on the site comes from here, so changing a value here
  changes it everywhere. The client portal will copy this file later, so keep
  it to tokens only: no page layout in this file.

  Fonts are self-hosted from /assets/fonts (SIL Open Font License, see the
  OFL-*.txt files there). The site makes no request to any other website.
*/

/* ---- Fonts ---------------------------------------------------------- */
/* Latin subset, woff2. The two upright files are variable fonts covering the
   weights in their font-weight range; the italic file is weight 300 only. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
}

/* ---- Tokens ----------------------------------------------------------- */

:root {
  /* Colour */
  --rega-black:        #070706;  /* page background */
  --rega-ivory:        #EDE6D6;  /* main text, links, the page links in the bar */
  --rega-gold:         #B8975A;  /* small capitals, the short rule */
  --rega-gold-light:   #D9BE85;  /* the page you are on, link hover, keyboard focus */
  --rega-cream:        #C9C1B2;  /* tagline, and the italic line under a page title */
  --rega-pearl:        #D9D1C1;  /* opening paragraph of a page */
  --rega-mist:         #BFB7A8;  /* text under each heading; home page division text */
  --rega-taupe:        #C4BBA9;  /* footer */
  --rega-bronze:       #6E5429;  /* line under a page's closing link */
  --rega-underline:    #3A3630;  /* line under the division links; divider in the bar */
  --rega-divider:      #2A2723;  /* line between the two divisions; under the open Menu */
  --rega-footer-rule:  #1F1D1A;  /* line above the footer on the home page */

  /* The surfaces that sit on the satin. Change the last number of --rega-card
     to make every card darker (towards 1) or let more satin through (towards 0). */
  --rega-card:         rgba(7, 7, 6, 0.92);       /* a card on the three pages */
  --rega-card-edge:    rgba(184, 151, 90, 0.16);  /* its thin gold edge */
  --rega-bar:          rgba(7, 7, 6, 0.93);       /* the header bar, the footer strip */
  --rega-bar-edge:     rgba(184, 151, 90, 0.18);  /* their thin gold edge */
  --rega-menu:         rgba(9, 8, 7, 0.98);       /* the open Menu on a phone */
  --rega-dim:          rgba(0, 0, 0, 0.55);       /* the page behind the open Menu */
  /* A soft darkening behind each page title, so the title and the gold line
     above it stay readable where they cross the brightest parts of the satin. */
  --rega-hush: radial-gradient(ellipse 120% 60% at 50% calc(50% - 24px), rgba(7, 7, 6, 0.5) 40%, rgba(7, 7, 6, 0) 80%);

  /* Type */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --weight-light:   300;
  --weight-regular: 400;

  --size-wordmark: clamp(56px, 11vw, 148px);  /* REGA on the home page */
  --size-tagline:  clamp(20px, 2.2vw, 26px);   /* italic lines: tagline, under a title */
  --size-heading:  32px;   /* the two division names on the home page */
  --size-text:     17px;   /* text under each heading; home page division text */
  --size-nav:      13px;   /* the page links and Client access in the bar */
  --size-link:     13px;   /* capitalised links: Private, Enter, closing links */
  --size-caps:     12px;   /* small capitals: eyebrows, the I II III numerals; the Menu button */
  --size-footer:   12px;   /* footer */
  --size-menu:     30px;   /* the page links in the open Menu */

  /* The three pages: /travel, /corporate, /consulting */
  --size-title:      clamp(44px, 6.5vw, 84px);     /* the page title */
  --size-title-long: clamp(40px, 5.6vw, 72px);     /* a longer title (Corporate) */
  --size-intro:      clamp(22px, 2.4vw, 28px);     /* opening paragraph */
  --size-section:    clamp(28px, 3vw, 36px);       /* section headings */
  --size-item:       24px;                         /* headings inside a section */

  --tracking-wordmark: 0.32em;
  --tracking-caps:     0.32em;  /* small capitals: eyebrows */
  --tracking-nav:      0.24em;  /* the page links and Client access in the bar */
  --tracking-menu:     0.26em;  /* the Menu button, Client access in the Menu */
  --tracking-links:    0.28em;  /* capitalised links */
  --tracking-footer:   0.22em;
  --tracking-heading:  0.04em;
  --tracking-title:    0.03em;  /* page titles and section headings */

  --leading-text: 1.7;

  /* Spacing */
  --page-pad-block:  32px;
  --page-pad-inline: clamp(20px, 5vw, 72px);
  --link-pad:        14px;

  /* The header bar's height, its 1px edge included: 81px on wide screens
     (room for the 48px monogram), 64px on phones. The bar, the in-page link
     offset and the dim under the open Menu all follow it. */
  --bar-height:      81px;

  /* The cards on the three pages. */
  --card-pad:        64px 72px 72px;
  --card-gap:        56px;

  /* The space for a page's title, from the top of the page: 720 to 760px on
     wide screens, scaling with the screen on a phone, never under 520px. */
  --hero-height:     clamp(520px, 80vh, 760px);
}

@media (min-width: 768.02px) {
  :root {
    --hero-height: clamp(720px, 80vh, 760px);
  }
}

/* Phones and small tablets: the 64px bar with the Menu, smaller cards. */
@media (max-width: 768px) {
  :root {
    --bar-height: 64px;
    --card-pad:   36px 24px 40px;
    --card-gap:   28px;
  }
}