/*
 * The new look for the customer pages, phase 1: the website's design tokens
 * and its type.
 *
 * Every rule here sits under .portal-new-look, and that is not a style choice.
 * Next does not take a stylesheet away when you navigate, so once a customer
 * page has loaded this file it stays in the browser for the rest of the visit,
 * including a member of staff going on to /crm. A rule that matched without the
 * class would restyle the CRM. Only the portal layout puts the class on, and
 * only when the `portal_new_look` flag says so, so with the flag off this whole
 * file matches nothing.
 *
 * The values are the website's (site/app/globals.css), kept under the same
 * names so screens ported from the site's app demo can use them unchanged.
 * None of these names is read anywhere else in the app.
 */

.portal-new-look {
  --navy: #112b64;
  --deep: #0a2047;
  --blue: #2563eb;
  --blue-d: #1d4fd8;
  --ink: #0a2047;
  --mut: #5f6b82;
  --line: #e4e8f0;
  --surf: #f3f5f9;
  --pale: #eaf1ff;
  --g1: #dce8ff;
  --g2: #f1f6ff;
  --ok: #12a150;
  --r-lg: 40px;
  --r-md: 28px;
  --r-sm: 18px;
  --sh: 0 30px 60px -24px rgba(10, 32, 71, 0.28);
  --sh-s: 0 1px 2px rgba(10, 32, 71, 0.06), 0 8px 24px -12px rgba(10, 32, 71, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /*
   * --font-inter and --font-inter-tight are set by the next/font classes the
   * layout puts on this same element, so they resolve here and nowhere else.
   */
  --f-body: var(--font-inter), system-ui, sans-serif;
  --f-disp: var(--font-inter-tight), var(--font-inter), sans-serif;

  font-family: var(--f-body);

  /*
   * An email address, reference or file name longer than the screen is wide
   * breaks onto the next line instead of running off the edge, where it was
   * clipped on a phone. Inherited, and only acts on a word that cannot fit.
   */
  overflow-wrap: break-word;
}

/*
 * The app's headings ask for Poppins through the font-heading utility and the
 * global heading rule, and its body text for DM Sans through font-body. Inside
 * the new look both are answered with the site's pair instead. Weights, sizes
 * and colours are left as each screen sets them; those change screen by screen
 * as each one is ported.
 */
.portal-new-look :is(h1, h2, h3, h4, h5, h6),
.portal-new-look .font-heading {
  font-family: var(--f-disp);
}

.portal-new-look .font-body {
  font-family: var(--f-body);
}