/*!
 * Flux 2.0 — Kaptio design system
 * Prototype layer — product prototype typography
 *
 * Product prototypes, such as Edge explorations, use Google Sans Flex for
 * headings and KPI values and Manrope for everything else. Decks keep Lexend
 * and JetBrains Mono, so this layer is opt-in: a prototype loads it after
 * flux.css and flux-components.css and is retyped from the root.
 *
 * A document that only shows prototype regions, such as the documentation
 * site, sets data-flux-type="lexend" on its root and data-flux-type="prototype"
 * on each region.
 *
 * Requires flux.css. Never load it alongside flux-deck.css.
 *
 * Canonical: https://flux.kaptio.com/foundations/typography/#prototypes
 */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&family=Manrope:wght@400;500;600&display=swap');

@layer flux.prototype {
  /* Every component reads these roles, so remapping them retypes the whole
     component layer without a second implementation. Prototypes have no mono
     voice: identifiers, badges and table headers set in Manrope. */
  :root:not([data-flux-type='lexend']),
  [data-flux-type='prototype'] {
    --flux-font-sans: var(--flux-prototype-font-ui);
    --flux-font-mono: var(--flux-prototype-font-ui);
    --flux-weight-light: var(--flux-prototype-weight-regular);
    --flux-weight-bold: var(--flux-prototype-weight-semibold);
    --flux-weight-mono-regular: var(--flux-prototype-weight-regular);
    --flux-weight-mono-medium: var(--flux-prototype-weight-medium);
    --flux-weight-mono-bold: var(--flux-prototype-weight-semibold);
    /* A binding resolves where it is declared, so a scoped region re-declares it. */
    --flux-button-font-weight: var(--flux-weight-bold);
    --flux-badge-font-weight: var(--flux-weight-bold);
    /* Tailwind's font-* utilities, for prototypes built with flux-tailwind.css. */
    --font-weight-thin: var(--flux-prototype-weight-regular);
    --font-weight-extralight: var(--flux-prototype-weight-regular);
    --font-weight-light: var(--flux-prototype-weight-regular);
    --font-weight-normal: var(--flux-prototype-weight-regular);
    --font-weight-medium: var(--flux-prototype-weight-medium);
    --font-weight-semibold: var(--flux-prototype-weight-semibold);
    --font-weight-bold: var(--flux-prototype-weight-bold);
    --font-weight-extrabold: var(--flux-prototype-weight-bold);
    --font-weight-black: var(--flux-prototype-weight-bold);
  }

  /* This layer changes typefaces and weights only. Sizes and line heights are
     the ones the base and component layers set for Lexend, so a prototype and
     the product it explores share one scale. */
  :root:not([data-flux-type='lexend']) body,
  [data-flux-type='prototype'] {
    font-family: var(--flux-font-sans);
    font-weight: var(--flux-weight-light);
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype'])
    :is(h1, h2, h3, h4, h5, h6, .flux-card__title, .flux-modal__title, .flux-note__title, .flux-table-toolbar__title) {
    font-family: var(--flux-prototype-font-display);
    font-weight: var(--flux-prototype-weight-medium);
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype'])
    :is(.flux-field__label, .flux-dl__term, .flux-metric__label) {
    font-weight: var(--flux-prototype-weight-medium);
  }

  /* KPI roles. The Metric component takes them; .flux-kpi and .flux-kpi-change
     are for a figure outside a metric row, at the Metric sizes. */

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) :is(.flux-kpi, .flux-metric__value) {
    font-family: var(--flux-prototype-font-display);
    font-weight: var(--flux-prototype-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) :is(.flux-kpi-change, .flux-metric__change) {
    font-weight: var(--flux-prototype-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) .flux-kpi {
    color: var(--flux-metric-value-color);
    font-size: var(--flux-metric-value-size);
    letter-spacing: var(--flux-metric-value-tracking);
    line-height: var(--flux-leading-tight);
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) .flux-kpi-change {
    font-size: var(--flux-metric-change-size);
  }

  /* Prototype roles with no component of their own. */

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) .flux-description {
    font-size: var(--flux-text-base);
    font-weight: var(--flux-prototype-weight-regular);
    line-height: var(--flux-leading-normal);
  }

  :where(:root:not([data-flux-type='lexend']), [data-flux-type='prototype']) .flux-meta {
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-prototype-weight-regular);
  }
}