/* Per-brand half of the reference site's styles.

   Every value here is a token from the kit (assets/tokens.css, assets/fonts.css):
   nothing authored, nothing eyeballed. site.css consumes these variables and
   holds the layout; it is brand-neutral, leave it alone.

   This file is one mapping and nothing else. If a rule wants to live here, it
   belongs in site.css instead. Same split as the guidelines build, on purpose:
   brand.css carries the faces and the colors, the neutral sheet carries the
   layout, and the next pass reuses the neutral sheet unchanged.

   The right-hand side of every line below is a token name from the kit's own
   tokens.css. If a token the page needs does not exist, add it to the kit's
   visual-system.json and regenerate: never hard-code the value here. */

:root {
  /* Ground and ink. The page is off-white, specimens sit on beige, type is
     ink and the accent is red-ochre: the first approved pairing in the kit. */
  --site-bg:        var(--background);
  --site-bg-2:      var(--beige);
  --site-ink:       var(--text);
  --site-accent:    var(--accent);

  /* The secondary palette, for the motion demos' three illustration-only
     colors (orange ochre, blue, green): distinguishing states inside a
     diagram, never a layout accent. */
  --site-accent-2: var(--accent-2);
  --site-accent-4: var(--accent-4);
  --site-accent-5: var(--accent-5);

  /* The accent's own tint, which the kit names as the role tag's ground. */
  --site-accent-tint: var(--red-ochre-15);

  /* Neutrals, light to dark. The kit's working range for interface surfaces is
     the two beiges and the two off-whites, closing on ink. */
  --site-neutral-10: var(--white);
  --site-neutral-20: var(--off-white);
  --site-neutral-30: var(--beige);
  --site-neutral-50: var(--dark-beige);
  --site-neutral-70: var(--ink-75);
  --site-neutral-80: var(--dark-beige);
  --site-neutral-90: var(--ink);

  /* The surfaces that invert. This brand permits no black and no full-color
     field, so the feature surface is ink on dark-beige, which is on the kit's
     approved pairing list. The rail's tile takes the same ground, because the
     logo files ship in ink and need a light one. */
  --site-feature-bg:   var(--dark-beige);
  --site-feature-ink:  var(--ink);
  --site-feature-note: var(--ink-75);
  --site-feature-rule: var(--ink-75);

  /* The footer. Red ochre is an accent and never a full-bleed field, so the
     page closes on beige with the ink wordmark rather than on the accent. */
  --site-foot-bg:  var(--beige);
  --site-foot-ink: var(--ink);

  /* Faces. Three roles: display for headings, body for prose, and the label
     style standing in for the page's mono role, since this kit ships no mono
     family and gives eyebrows, captions and interface furniture to the label
     rows of the sans. */
  --site-font-display: var(--font-display-stack);
  --site-font-body:    var(--font-sans-stack);
  --site-font-mono:    var(--font-sans-stack);

  /* Three cuts ship and there is no bold. The body-bold role takes the regular
     weight rather than letting a browser synthesise one. */
  --site-weight-display:   var(--weight-light);
  --site-weight-body:      var(--weight-regular);
  --site-weight-body-bold: var(--weight-regular);
  --site-weight-mono:      var(--weight-regular);

  /* Headlines are sentence case in this system. Uppercase belongs to the label
     rows, which the page reaches through its mono role. */
  --site-case-display: none;

  --site-leading-display: var(--text-headline-medium-leading);
  --site-leading-body:    var(--text-body-medium-leading);
  --site-leading-eyebrow: var(--text-label-small-leading);

  --site-tracking-h1:      var(--text-headline-medium-tracking);
  --site-tracking-h2:      var(--text-headline-x-small-tracking);
  --site-tracking-h3:      var(--text-title-large-tracking);
  --site-tracking-body:    var(--text-body-medium-tracking);
  --site-tracking-eyebrow: var(--text-label-small-tracking);

  /* Heading sizes. This kit sets its own ramp, so the page reads it rather
     than choosing sizes of its own. */
  --site-text-h1:      var(--text-headline-medium-size);
  --site-text-h2:      var(--text-headline-x-small-size);
  --site-text-h3:      var(--text-title-large-size);
  --site-text-eyebrow: var(--text-label-small-size);

  /* Prose sizes, largest to smallest. */
  --site-text-p1: var(--text-body-large-size);
  --site-text-p2: var(--text-body-medium-size);
  --site-text-p3: var(--text-body-small-size);

  /* Spacing. The kit's four gaps are named for what they separate rather than
     for their size, so the page's five steps map onto them by relationship and
     take the kit's section padding for the largest. */
  --site-space-half-x: var(--gap-inner);
  --site-space-x:      var(--gap-related);
  --site-space-2x:     var(--gap-parts);
  /* The two largest steps run at half the kit's number. The kit sets them for
     print, where a page break does the work a scroll does here: on one long
     scrolling page 120px between blocks and 240px above and below every band
     read as the page having lost its place rather than as room to breathe. The
     ratio between the steps is the kit's, and the smaller three are the kit's
     own numbers, so a component still measures what the kit says it measures.
     The cut is made here, where the page maps its steps onto the kit's gaps,
     because the packaged kit is frozen. */
  --site-space-6x:     calc(var(--gap-blocks) / 2);
  --site-space-12x:    calc(var(--section-padding-block) / 2);

  /* The rail. Its width is the one place this page leaves the kit's own
     number. The kit sets --rail-width for the brand's marcom rail, which marks
     progress through a handful of stops and needs no room for a word. This rail is the index to
     fifteen sections and has to name them, so it takes the module twice over,
     which is still a layout value the kit sets. */
  --site-rail-index-w:     calc(var(--layout-module) * 3);

  /* The palette reads as circles. Their diameter is two modules, so a row of
     three and a row of four draw the same swatch rather than scaling with the
     column. */
  --site-swatch-d:         calc(var(--layout-module) * 2);
  /* The navigation's ground in the design file: white, against the page's
     off-white paper. The surface token, not the page token. */
  --site-rail-bg:          var(--surface);
  --site-rail-pad-inline:  var(--rail-padding-inline);
  --site-rail-pad-block:   var(--gap-parts);
  /* The button. Label Medium, uppercase, the accent on a white ground, on even
     padding. */
  --site-cta-pad-y:      var(--gap-related);
  --site-cta-pad-x:      var(--gap-related);
  --site-cta-size:       var(--text-label-medium-size);
  --site-cta-tracking:   var(--text-label-medium-tracking);
  --site-cta-radius:     var(--radius-card);
  --site-cta-quiet-bg:   var(--white);
  --site-cta-quiet-ink:  var(--accent);

  /* The cover. The kit permits full-bleed pigment imagery as a ground and puts
     white type and a white lockup on it, and it is the only field in the system
     that runs to all four edges. The render carries its own grain, so the
     page's grain overlay stays off it. Ink sits behind the image as the color
     the screen holds before it loads. */
  --site-cover-bg:  var(--ink);
  --site-cover-ink: var(--white);

  /* Noise. The kit names it as one of three material devices and ships no
     asset for it, so the page generates its own: a fine monochrome grain laid
     under the composition, never the subject of it. */
  --site-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --site-grain-opacity: 0.22;
  --site-grain-blend: multiply;

  /* The single hairline that divides the whole page. The kit sets no border
     weight, so the hairline is the page's own; its color is a kit value. */
  --site-rule-weight: 1px;
  --site-rule-color:  var(--dark-beige);

  /* Motion. Four curves, three durations, three lift distances, four stagger
     intervals: the kit's own tokens, read rather than retyped. */
  --site-motion-ease-neutral:  var(--motion-ease-neutral);
  --site-motion-ease-enter:    var(--motion-ease-enter);
  --site-motion-ease-standard: var(--motion-ease-standard);
  --site-motion-ease-exit:     var(--motion-ease-exit);

  --site-motion-duration-react-in:  var(--motion-duration-react-in);
  --site-motion-duration-react-out: var(--motion-duration-react-out);
  --site-motion-duration-reveal:    var(--motion-duration-reveal);
  --site-motion-duration-press:     var(--motion-duration-press);

  --site-motion-lift-micro:  var(--motion-lift-micro);
  --site-motion-lift-macro:  var(--motion-lift-macro);
  --site-motion-lift-hero:   var(--motion-lift-hero);

  --site-motion-stagger-simultaneous: var(--motion-stagger-simultaneous);
  --site-motion-stagger-default:      var(--motion-stagger-default);
  --site-motion-stagger-feature:      var(--motion-stagger-feature);
  --site-motion-stagger-narrative:    var(--motion-stagger-narrative);
}