/* ==================================================================
   Rafael Riedel - design system entry point
   ==================================================================
   This file is the whole contract. A rendered design receives only
   what is reachable from here through @import, so every token, font
   and brand asset must stay inside this closure. Import this one file
   and the entire identity is available.

   Closure:
     fonts/fonts.css      self-hosted Inter + Raleway (variable)
     tokens/colors.css    primitive ramps, OKLCH-generated
     tokens/semantic.css  intent tokens + dark ground
     tokens/typography.css families, scale, weight, tracking
     tokens/layout.css    spacing, radius, elevation, motion
     tokens/logo.css      mark + wordmark as data URIs
     tokens/viz.css       chart palette, validated for CVD in both modes
     _ds_bundle.css       the component layer

   The idiom is CSS custom properties plus the component classes in
   _ds_bundle.css. There is no utility-class framework: style with
   var(--rr-*) and compose the .rr-* components.
   ================================================================== */

@import url('./fonts/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/layout.css');
@import url('./tokens/semantic.css');
@import url('./tokens/logo.css');
@import url('./tokens/viz.css');
@import url('./_ds_bundle.css');

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rr-bg-canvas);
  color: var(--rr-fg);
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-md);
  line-height: var(--rr-leading-normal);
  letter-spacing: var(--rr-tracking-body);
  font-weight: var(--rr-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display type is tight in both axes. Large headings set at body
   leading look broken, so the leading tightens as the size grows. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--rr-font-sans);
  font-weight: var(--rr-weight-semibold);
  line-height: var(--rr-leading-display);
  letter-spacing: var(--rr-tracking-display);
  color: var(--rr-fg);
  text-wrap: balance;
}

h1 { font-size: var(--rr-text-4xl); letter-spacing: var(--rr-tracking-tighter); }
h2 { font-size: var(--rr-text-3xl); }
h3 { font-size: var(--rr-text-2xl); }
h4 { font-size: var(--rr-text-xl); line-height: var(--rr-leading-tight); }
h5 { font-size: var(--rr-text-lg); line-height: var(--rr-leading-snug); letter-spacing: var(--rr-tracking-tight); }
h6 { font-size: var(--rr-text-md); line-height: var(--rr-leading-snug); letter-spacing: var(--rr-tracking-tight); }

p { margin: 0; max-width: var(--rr-measure); text-wrap: pretty; }

/* The lead paragraph under a heading: larger, quieter, narrower. */
.rr-lead {
  font-size: var(--rr-text-lg);
  line-height: var(--rr-leading-snug);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-fg-muted);
  max-width: var(--rr-measure-tight);
}

/* Section rhythm. More space above a heading than below it. */
.rr-section { padding-block: var(--rr-section-md); }
.rr-section--lg { padding-block: var(--rr-section-lg); }
.rr-section--hero { padding-block: var(--rr-section-xl); }
.rr-stack { display: flex; flex-direction: column; gap: var(--rr-section-sm); }
.rr-container {
  width: 100%;
  max-width: var(--rr-container);
  margin-inline: auto;
  padding-inline: var(--rr-gutter);
}
.rr-container--wide { max-width: var(--rr-container-wide); }

a {
  color: var(--rr-fg-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--rr-focus-ring);
  outline-offset: 2px;
  border-radius: var(--rr-radius-sm);
}

::selection {
  background: var(--rr-mint-500);
  color: var(--rr-indigo-900);
}

/* ------------------------------------------------------------------
   Brand treatments
   ------------------------------------------------------------------
   Deliberately few. These encode the two things that are easy to get
   wrong by hand - the Raleway eyebrow, and sizing the logo without
   distorting it. Everything else should be built from raw tokens.
   ------------------------------------------------------------------ */

/* The house eyebrow: uppercase Raleway with wide tracking. Used for
   kickers and section labels. Without the tracking it reads as body
   copy in the wrong typeface. */
.rr-eyebrow {
  font-family: var(--rr-font-display);
  font-weight: var(--rr-weight-semibold);
  font-size: var(--rr-text-xs);
  letter-spacing: var(--rr-tracking-widest);
  text-transform: uppercase;
  color: var(--rr-fg-muted);
}

/* The headline pairing taken from the wordmark itself: Medium weight
   set against Bold. Put the emphasised half in <strong>. */
.rr-headline {
  font-family: var(--rr-font-sans);
  font-weight: var(--rr-weight-medium);
  letter-spacing: var(--rr-tracking-tight);
  line-height: var(--rr-leading-tight);
}
.rr-headline strong { font-weight: var(--rr-weight-bold); }

/* Logo. Set a width (or height) on the element; the aspect ratio keeps
   the proportions honest. Colour variants are separate modifiers so the
   mark is never accidentally recoloured by inherited text colour. */
.rr-logo-mark,
.rr-logo-wordmark,
.rr-logo-appicon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rr-logo-mark { aspect-ratio: var(--rr-logo-mark-ratio); width: 96px; background-image: var(--rr-logo-mark-indigo); }
.rr-logo-mark--mint   { background-image: var(--rr-logo-mark-mint); }
.rr-logo-mark--white  { background-image: var(--rr-logo-mark-white); }
.rr-logo-mark--purple { background-image: var(--rr-logo-mark-purple); }

.rr-logo-wordmark { aspect-ratio: var(--rr-logo-wordmark-ratio); width: 200px; background-image: var(--rr-logo-wordmark-indigo); }
.rr-logo-wordmark--white { background-image: var(--rr-logo-wordmark-white); }

.rr-logo-appicon { aspect-ratio: 1 / 1; width: 64px; background-image: var(--rr-logo-appicon); }

/* Tint the mark any colour at all, including currentColor. */
.rr-logo-mark--tinted {
  background-image: none;
  background-color: currentColor;
  -webkit-mask-image: var(--rr-logo-mark-mask);
          mask-image: var(--rr-logo-mark-mask);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}