/*
 * The design's values. The layout, type and spacing are the mockups'
 * (version 18). The colours come in two versions, and the page's data-theme
 * says which it shows. ApplicationHelper::COLOUR_SCHEME sets it for every
 * page, and it's dark, whatever the visitor's device is set to:
 *
 * - dark, the mockups' own: light text on near-black
 * - light (AB#4806), in the style of UBF's conference booth: dark text on
 *   pale greys, with the booth's backdrop in each hero
 *
 * Both have the same blue, green and gold. Each colour used for text has at
 * least WCAG AA's contrast (4.5:1, or 3:1 for large text) on the darkest
 * ground it sits on; the comments give the ratios. Every colour token has a
 * value in both, unless it's the same in both: a new one needs a dark value
 * below as well as its light one here.
 *
 * The colours are named for what they do, such as the page's ground or muted
 * text, rather than for how they look, so the stylesheets that use them don't
 * depend on the site being light or dark.
 */
@layer tokens {
  :root {
    /* Browsers draw their own parts, such as a select's list, scrollbars
       and autofilled fields, in the same version as the site */
    color-scheme: light;

    /* Surfaces, from the page's ground up: cards and the menus' panels sit
       on the page, and form fields are raised again. Here all three are
       white, and their borders set them apart */
    --color-page: #fff;
    --color-surface: #fff;
    --color-surface-raised: #fff;
    /* The hero's panel, a window onto the plane: the booth's backdrop, a
       light grey, lighter towards the middle, with a grid of white lines
       (components.css). This is its darkest grey, at its edges, and the
       darkest ground any text sits on but the blue spotlight's middle
       (below), so the ratios below are measured on it unless they say
       otherwise */
    --color-hero: #ededed;
    /* The hero's middle, the page's white */
    --color-hero-glow: var(--color-page);
    /* The header, across the screen's width over the page as it scrolls by,
       and its bottom edge, a solid version of --color-border */
    --color-header: var(--color-page);
    --color-header-edge: #e1e1e2;
    /* The phone menu's panel, under the header */
    --color-menu-panel: var(--color-surface);
    /* The page's vignette (base.css): the screen's corners darken a tenth
       of the way to a cool grey, to about #fcfcfc, far lighter than the
       hero's grey, which the text's contrast is measured on */
    --color-vignette: rgb(221 224 227 / 0.1);
    /* Behind pills */
    --color-pill: rgb(255 255 255 / 0.7);
    /* The QUANTUM hero's "Used by" corner: a translucent pane, through which
       the hero's grid shows, softened by the blur, and the pills on it */
    --color-pane: rgb(255 255 255 / 0.06);
    --color-pane-pill: var(--color-pill);
    --pane-blur: 2px;
    /* Lifts the pane a little over the hero */
    --shadow-pane: 0 3px 12px rgb(16 24 40 / 0.05);
    /* Behind the feature rows' screenshots */
    --color-panel: rgb(255 255 255 / 0.45);
    /* Behind a collaborator's logo, in its own colours, on Collaborations:
       the white the logos are drawn for */
    --color-logo-plate: #fff;

    --color-border: rgb(8 9 12 / 0.12);
    --color-border-strong: rgb(8 9 12 / 0.2);
    --color-border-pill: rgb(8 9 12 / 0.16);
    /* Form fields' edges: WCAG needs 3:1 for a control's edge. 4.15:1 on the
       page and the field, both white */
    --color-border-control: #787d84;
    /* Behind a link or option under the pointer */
    --color-wash: rgb(8 9 12 / 0.05);
    /* The hero's grid, as on the booth: white, half opaque */
    --color-grid: rgb(255 255 255 / 0.55);
    /* Under a panel that opens over the page: the menus and the select's list */
    --shadow-popover: 0 12px 32px rgb(16 24 40 / 0.14);
    /* The screenshots' tablet frames, as the booth shows the apps: the
       frame, its rim and its shadow */
    --color-bezel: #1c1f24;
    --color-bezel-edge: #50555c;
    --shadow-device: 0 28px 48px -20px rgb(16 24 40 / 0.45);

    /* Text. The near-black is the logo's, for light backgrounds */
    --color-text: #08090c;
    /* Pills, and the legal pages' long text. 12.6:1 */
    --color-text-soft: #25282d;
    /* 6.42:1, and 7.51:1 on the page */
    --color-text-muted: #50555c;
    /* The faded words in headings: the booth's grey for "feel". 4.47:1,
       above large text's 3:1 */
    --color-text-faint: #6b6d68;

    /* The hero plane's lines, and the colour they fade into with distance:
       the hero panel's average where the plane is drawn, measured, as its
       grey lightens towards the middle and the grid runs over it, with each
       product's spotlight tinting it a little */
    --color-plane: var(--color-text);
    --color-plane-fog: #f2f2f2;

    /* Each product's colour comes in up to seven parts: the colour itself,
       for borders, dots and the logo; a version for text, where the colour
       itself is too faint to read (darker on the light ground, a lighter blue
       on the dark); the button's colour and the text on it; a tint and an
       edge, for tags; and the hero's spotlight (components.css).

       Here the spotlights are pale and bright, to look like coloured light
       on the hero's grey rather than a shadow. The green and gold are as
       colourful as a screen can show them while lighter than the grey. A
       screen can't show the blue both that light and that colourful, so
       it's a little darker than the grey, yet still looks bright, as strong
       colours look brighter than greys of the same lightness. Text over its
       middle: the faded words 4.26:1, muted text 6.12:1 and the blue text
       5.88:1 */

    /* QUANTUM blue */
    --color-quantum: #3a7bd5;
    /* 6.17:1, and 6.32:1 on its own tint on the page */
    --color-quantum-text: #235896;
    /* #3a7bd5 is 4.22:1 behind white text; this is 4.73:1 */
    --color-quantum-button: #3673c8;
    --color-on-quantum: #fff;
    --color-quantum-tint: rgb(58 123 213 / 0.11);
    --color-quantum-edge: rgb(58 123 213 / 0.3);
    --color-quantum-spotlight: #dbe9fd;

    /* Training App green. Its buttons are the colour itself, with near-black
       text (7.06:1): white on it is 2.82:1 */
    --color-training: #1aaf78;
    /* 6.09:1, and 6.39:1 on its own tint on the page */
    --color-training-text: #09653f;
    --color-on-training: #08090c;
    --color-training-tint: rgb(26 175 120 / 0.11);
    --color-training-edge: rgb(26 175 120 / 0.3);
    --color-training-spotlight: #d0ffe5;

    /* Warm, for the company pages and highlights */
    --color-warm: #c8934a;
    /* 6.01:1, and 6.38:1 on its own tint on the page */
    --color-warm-text: #7a5016;
    /* Large text only: the closing headlines' highlighted words. Brighter,
       nearer the booth's gold: 4.57:1 on the page, where those headlines
       are, above large text's 3:1 */
    --color-warm-large: #9c6c2a;
    --color-warm-tint: rgb(200 147 74 / 0.11);
    --color-warm-edge: rgb(200 147 74 / 0.3);
    --color-warm-spotlight: #ffefdc;

    /* The emergency procedures' heading. 6.13:1 on a card */
    --color-danger: #b42a2a;

    /* Type */
    --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
    --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;

    --text-label: 12px;
    --text-small: 13px;
    --text-body: 15px;
    --text-lead: 16px;

    /* Headings in Syne take no letter-spacing, as UBF's other marketing
       literature sets them. The mockups used five values, from -0.033em
       to 0 */
    --letter-spacing-heading: 0;

    /* Line heights. The large headings (each page's main heading and the
       closing call to action) are set solid; the smaller ones need a little
       more room between lines. The mockups used 0.97 to 1.25. Every
       paragraph style shares one; the mockups used six values between 1.65
       and 1.8 */
    --line-height-heading-large: 1;
    --line-height-heading: 1.2;
    --line-height-paragraph: 1.75;

    /* Space and shape */
    --page-width: 1080px;
    /* The hero's grid squares: 18 across the page's width, 60 px, a little
       bigger than the booth's 20. The hero's height is a whole number of
       them (components.css) */
    --grid-size: calc(var(--page-width) / 18);
    --gutter: 40px;
    --radius-small: 3px;
    --radius: 4px;
    --radius-large: 6px;
    --header-height: 64px;
  }

  /* The dark version: the mockups' own colours, on every page unless its
     data-theme says light. Where they failed WCAG AA contrast, these are the
     corrected values, and the comments give the mockups' originals */
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Surfaces, darkest first. The hero's panel is the cards' colour, with
       no lighter middle */
    --color-page: #08090c;
    --color-surface: #0d1017;
    --color-surface-raised: #141a24;
    --color-hero: #0d1017;
    --color-hero-glow: transparent;
    --color-header-edge: #191a1d;
    --color-menu-panel: var(--color-page);
    /* Barely there on the near-black, and only darker, so contrast only
       rises */
    --color-vignette: rgb(0 0 0 / 0.3);
    --color-pill: rgb(255 255 255 / 0.06);
    --color-panel: #141a24;
    /* A light plate on the dark page, a touch warmer than white, for less
       glare */
    --color-logo-plate: #f4f3ef;
    /* Glass a little lighter than the hero. Its pills have no wash of their
       own, as with one the "+ more" pill's muted text would be under 4.5:1
       on a pane much lighter than this; without, it's 4.78:1 */
    --color-pane: rgb(255 255 255 / 0.0125);
    --color-pane-pill: transparent;
    --shadow-pane: 0 3px 12px rgb(0 0 0 / 0.2);

    --color-border: rgb(255 255 255 / 0.07);
    --color-border-strong: rgb(255 255 255 / 0.14);
    --color-border-pill: rgb(255 255 255 / 0.18);
    /* The mockup's 7% white is 1.2:1. 42% is 3.51:1 on the page and 3.08:1
       on the field */
    --color-border-control: rgb(234 232 224 / 0.42);
    --color-wash: rgb(255 255 255 / 0.06);
    /* The mockup's 1.4% white was barely visible (1.03:1 on the hero), and 5%,
       about the light version's weight (1.12:1), too strong. 3.3% is halfway
       between: 1.07:1, still well under the hairlines' 1.15:1 */
    --color-grid: rgb(255 255 255 / 0.033);
    --shadow-popover: 0 12px 32px rgb(0 0 0 / 0.5);
    /* The frame a little lighter than the panel behind it, with a light rim */
    --color-bezel: #262b34;
    --color-bezel-edge: rgb(255 255 255 / 0.14);
    --shadow-device: 0 28px 48px -20px rgb(0 0 0 / 0.7);

    --color-text: #eae8e0;
    --color-text-soft: rgb(234 232 224 / 0.85);
    /* Mockup: 48% opacity, 4.12:1 on cards. 52% is 4.59:1 or more on every surface */
    --color-text-muted: rgb(234 232 224 / 0.52);
    /* Mockup: 30%, 2.32:1. 42% is 3.47:1 or more, above large text's 3:1 */
    --color-text-faint: rgb(234 232 224 / 0.42);

    --color-plane-fog: var(--color-hero);

    /* The mockup's #3a7bd5 is 3.87:1 on cards and 4.30:1 on its own tint */
    --color-quantum-text: #4f8bdd;
    --color-quantum-edge: rgb(58 123 213 / 0.2);
    --color-training-text: #1aaf78;
    --color-training-edge: rgb(26 175 120 / 0.2);
    --color-warm-text: #c8934a;
    --color-warm-large: #c8934a;
    --color-warm-edge: rgb(200 147 74 / 0.2);
    /* The spotlight as the mockups had it: a faint wash of each colour,
       which lightens the near-black a little */
    --color-quantum-spotlight: rgb(58 123 213 / 0.08);
    --color-training-spotlight: rgb(26 175 120 / 0.08);
    --color-warm-spotlight: rgb(200 147 74 / 0.08);
    --color-danger: #d85a5a;
  }

  @media (max-width: 768px) {
    :root {
      --gutter: 24px;
    }
  }

  /* Each page sets its accent with data-accent on <body>, blue unless it
     says otherwise, and a part of a page can set its own, as the home page's
     product cards do */
  :root,
  [data-accent="quantum"] {
    --accent: var(--color-quantum);
    --accent-text: var(--color-quantum-text);
    --accent-tint: var(--color-quantum-tint);
    --accent-edge: var(--color-quantum-edge);
    --accent-spotlight: var(--color-quantum-spotlight);
  }

  [data-accent="training"] {
    --accent: var(--color-training);
    --accent-text: var(--color-training-text);
    --accent-tint: var(--color-training-tint);
    --accent-edge: var(--color-training-edge);
    --accent-spotlight: var(--color-training-spotlight);
  }

  [data-accent="warm"] {
    --accent: var(--color-warm);
    --accent-text: var(--color-warm-text);
    --accent-tint: var(--color-warm-tint);
    --accent-edge: var(--color-warm-edge);
    --accent-spotlight: var(--color-warm-spotlight);
  }
}