/*
 * SGH Events design tokens
 *
 * Source of truth for the visual system. Two inputs fed this file:
 *   1. SGH-BRAND-GUIDELINES-BOARD.pdf   palette (with Pantone refs) and typeface
 *   2. Home Page.pdf / Augusta Page.pdf  measured, not eyeballed. The design frame
 *      is 1440px wide: nav type measures 14px at that scale, which is what pins it.
 *
 * Every component builds from these. If a value is wrong, it gets fixed once here
 * and the whole site follows, including the states the design never drew.
 */

:root {

  /* ---------------------------------------------------------------
   * Palette. Hex values are from the brand guidelines sheet.
   * --------------------------------------------------------------- */

  /* SGH Orange. Pantone 1655 C.
   * The guidelines print #E74E0F, which is the CMYK conversion. The homepage
   * design and the current live site both use a brighter screen orange, and
   * Pantone's own sRGB for 1655 C is #FC4C02. We use the design value, which
   * sits within a hair of it. One token: flip it here if the client wants the
   * guideline hex on screen too. */
  --sgh-orange: #FF4A00;
  --sgh-orange-print: #E74E0F;

  --sgh-charcoal: #07090B;        /* Pantone Black 3 C */
  --sgh-charcoal-light: #262626;  /* Pantone 447 C */
  --sgh-slate: #445055;           /* Pantone 424 C */
  --sgh-stone: #C2C4C5;           /* Pantone 421 C */
  --sgh-white: #FFFFFF;

  /* ---------------------------------------------------------------
   * Semantic colour. Components reference these, never the raw palette,
   * so a palette change stays a one-line change.
   * --------------------------------------------------------------- */
  --color-bg: var(--sgh-white);
  --color-bg-dark: var(--sgh-charcoal);
  --color-text: var(--sgh-charcoal);
  --color-text-muted: var(--sgh-slate);
  --color-text-invert: var(--sgh-white);
  --color-accent: var(--sgh-orange);
  --color-rule: var(--sgh-stone);
  --color-rule-invert: rgba(255, 255, 255, 0.22);

  /* Scrims. The design sets white type over photography throughout, so these
   * are what keep it legible rather than luck with a given image. */
  --scrim-hero: rgba(7, 9, 11, 0.58);
  --scrim-band: rgba(7, 9, 11, 0.62);
  /*
   * The end of the page runs testimonial, then "why choose", then the footer.
   * The two photographs behind the first two are supplied already darkened and
   * are within 0.0006 of each other in luminance, so giving them the same scrim
   * made all three read as one undifferentiated block.
   *
   * The design separates them by weight rather than by colour: its testimonial
   * band measures L=0.0118 and its "why choose" band L=0.0083, so the lower of
   * the two is the darker. These two scrims reproduce that, and the footer's
   * solid charcoal sits darker still. Descending, so each band has an edge.
   */
  --scrim-band-light: rgba(7, 9, 11, 0.22);   /* testimonial, the lightest */
  --scrim-band-mid: rgba(7, 9, 11, 0.45);     /* why choose, a step darker */
  /* Measured, not guessed: at 0.45 the orange link on the membership panel
   * came out at 3.1:1 over the brightest part of that photo, and at 0.62 it
   * was still 3.1:1 in the worst 5%. Orange needs 4.5:1 at 16px. */
  --scrim-card: rgba(7, 9, 11, 0.74);
  /* Resting state of the feature cards. Light enough that the photograph still
   * reads as a photograph, heavy enough for the white 24px title with room to
   * spare: at 0.42 the card with sky behind it measured 3.23:1 against a 3.0
   * requirement, and these images are the client's to swap. */
  --scrim-card-rest: rgba(7, 9, 11, 0.48);

  /* ---------------------------------------------------------------
   * Type. Gill Sans is the brand's primary font; the guidelines name
   * Arial/sans-serif as the sanctioned web fallback, so that is the stack.
   * Gill Sans ships with macOS, so it renders natively for the client and
   * for us. If a licensed webfont is bought later, add @font-face and the
   * first name in this stack picks it up with no other change.
   * --------------------------------------------------------------- */
  --font-body: "Gill Sans", "Gill Sans MT", GillSans, Calibri, Arial, sans-serif;
  --font-display: var(--font-body); /* single-family design, by the guidelines */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Scale measured off the 1440 design frame, expressed fluid so the
   * in-between widths the design never drew still hold their proportions. */
  --fs-nav: 0.875rem;                                  /* 14 */
  --fs-meta: 0.875rem;                                 /* 14, package card meta */
  --fs-btn: 1rem;                                      /* 16 */
  --fs-label: 0.9375rem;                               /* 15 */
  --fs-body: 1.125rem;                                 /* 18 */
  --fs-body-lg: clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem);   /* 18 - 22 */
  --fs-card-title: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); /* 18 - 20 */
  --fs-h4: clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem);        /* 18 - 22 */
  --fs-h3: clamp(1.25rem, 1.11rem + 0.6vw, 1.5rem);           /* 20 - 24 */
  --fs-h2: clamp(1.5rem, 1.29rem + 0.9vw, 1.875rem);          /* 24 - 30 */
  --fs-h2-md: clamp(1.625rem, 1.34rem + 1.2vw, 2.25rem);      /* 26 - 36 */
  --fs-h2-lg: clamp(1.75rem, 1.32rem + 1.8vw, 2.5rem);        /* 28 - 40 */
  --fs-display: clamp(1.875rem, 1.37rem + 2.1vw, 2.75rem);    /* 30 - 44 */
  --fs-hero: clamp(2rem, 1.43rem + 2.4vw, 3rem);              /* 32 - 48 */
  --fs-stat: clamp(2.5rem, 1.79rem + 3vw, 3.75rem);           /* 40 - 60 */

  --lh-tight: 1.1;
  --lh-display: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.45;
  --lh-loose: 1.6;

  /* The design sets all-caps headings with open tracking. Caps without added
   * tracking read cramped, so this is part of the type system, not a flourish. */
  --ls-caps: 0.06em;
  --ls-caps-tight: 0.02em;
  --ls-body: 0;

  /* ---------------------------------------------------------------
   * Layout. Design frame 1440 = 1248 content + 96 gutters either side.
   * --------------------------------------------------------------- */
  --container: 1248px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 6.7vw, 6rem);
  --grid-gap: 14px;   /* measured off the three-up rows in the design */

  /* ---------------------------------------------------------------
   * Spacing scale.
   * --------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;

  /* Vertical rhythm between full-width sections */
  --section-y: clamp(3rem, 6vw, 6.25rem);
  --section-y-tight: clamp(2rem, 4vw, 3.5rem);

  /* ---------------------------------------------------------------
   * Components
   * --------------------------------------------------------------- */
  --header-h: 5.5rem;
  --btn-py: 0.875rem;
  --btn-px: 2rem;
  --border-w: 2px;
  --radius: 0;          /* the design is uncompromisingly square */
  --focus-w: 3px;
  --focus-offset: 3px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
  --dur-slow: 400ms;

  --z-header: 100;
  --z-mobile-nav: 200;
  --z-skip: 300;
}

/* Anyone who has asked their OS to calm animation down gets that respected. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}