/* The authored layer over the measured one.
 *
 * design/tokens.css is generated from the goldens by tools/measure-golden.py and
 * must not be hand-edited. Everything a build needs that a raster cannot yield -
 * a value the measurement pass returned null for, a scale, a duration - is
 * declared here instead, in the same --resurs-* namespace and against the same
 * two goldens. site/ then holds no literal of its own, so a whole colour scheme
 * can be swapped by replacing these two files.
 *
 * Values marked "measured" were probed off the golden rasters and normalised to
 * the 1440 canvas by the same 0.9375 factor the token pass uses.
 */
:root {
  /* --- ink ------------------------------------------------------------ */
  /* measured: darkest 1% of the heading and label regions, second screen */
  --resurs-ink-muted: #5C6271;   /* section subtitles, group labels */
  --resurs-ink-soft:  #656A77;   /* card captions */
  --resurs-hairline:  #DFE2E7;   /* measured: the rule under contour B */

  /* --- the photograph and the glass over it --------------------------- */
  --resurs-on-photo:      #FFFFFF;
  --resurs-on-photo-dim:  rgba(255, 255, 255, 0.86);
  --resurs-on-photo-mute: rgba(255, 255, 255, 0.72);
  --resurs-glass-fill:    rgba(255, 255, 255, 0.14);
  --resurs-glass-edge:    rgba(255, 255, 255, 0.24);
  --resurs-glass-blur:    26px;
  /* The header sits on open sky; without this the nav loses contrast. */
  --resurs-photo-scrim: rgba(12, 16, 24, 0.28);

  /* --- radii ---------------------------------------------------------- */
  /* measured: the corner of the first tile falls from dx 11 to 0 over 11 rows */
  --resurs-radius-tile:  12px;
  --resurs-radius-plate: 12px;
  --resurs-radius-card:  14px;
  --resurs-radius-panel: 24px;
  /* measured: the sheet corner reaches the frame edge 23 raster rows down */
  --resurs-radius-sheet: 22px;
  --resurs-radius-pill:  999px;

  /* --- type ----------------------------------------------------------- */
  /* Sizes solved from cap and x-heights probed on both goldens. */
  --resurs-font: -apple-system, "SF Pro Display", "Segoe UI", Inter, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --resurs-size-display: 56px;   /* hero headline: the largest that still holds
                                    the golden's two-line break in the system stack */
  --resurs-size-heading: 48px;   /* section heading */
  --resurs-size-lead:    18px;   /* hero paragraph */
  --resurs-size-nav:     17px;
  --resurs-size-body:    16px;   /* tile and card names */
  --resurs-size-meta:    16px;   /* section subtitle */
  --resurs-size-small:   14px;   /* captions, group labels, links */
  --resurs-size-mark:    20px;   /* the company wordmark */

  /* --- rhythm --------------------------------------------------------- */
  /* measured: sheet edge to heading, and the gaps down the second screen */
  --resurs-page-width:    1291px;  /* 1440 less the measured insets */
  --resurs-header-inset:  34px;    /* measured: the mark's left edge on the golden */
  --resurs-subtitle-width: 302px;  /* measured: the subtitle column on the golden */

  /* The hero panel scales with the photograph rather than sitting at a fixed
     offset: both are full-bleed, so a fixed panel would drift off the part of
     the frame it is meant to cover. The measured box on the 1440 canvas -
     left 60.9px, width 660.9px - expressed as that same share of the viewport. */
  --resurs-glass-left-vw:  4.229vw;
  --resurs-glass-width-vw: 45.90vw;
  --resurs-glass-left-min: 20px;
  --resurs-glass-left-max: 76px;
  --resurs-glass-width-max: 720px;
  /* Measured: headline left less panel left, and panel bottom less CTA bottom. */
  --resurs-glass-pad: 78px 60px 60px 42px;
  --resurs-card-min-height: 218px; /* measured: the door card boxes */
  --resurs-sheet-pad-top: 32px;
  --resurs-gap-head:      44px;   /* heading block to the first group label */
  --resurs-gap-label:     16px;   /* group label to its tiles */
  --resurs-gap-contour:   22px;   /* the wider gap measured between the two contours */
  --resurs-gap-rule:      26px;   /* last tile row to the hairline */
  --resurs-gap-section:   46px;   /* hairline to the next heading */
  --resurs-gap-cards:     46px;   /* heading block to the cards */
  --resurs-sheet-pad-bottom: 72px;

  /* --- lift ----------------------------------------------------------- */
  /* Two things on this page are physically above another, and only two. The
     sheet, which rises over the photograph. And the icon object, which the
     owner ruled must float on its tile (2026-09-01) — the amendment to the
     older law that nothing on the sheet had a shadow. Everything else stays
     flat: the tile ground, the card, the rule, the type. */
  --resurs-sheet-lift: 0 -18px 48px rgba(9, 14, 24, 0.28);
  --resurs-plate-edge: #EDEFF2;

  /* The icon object. A face lit along its top edge and falling away below,
     seated by a tight shadow and floated by a wide one. Two shadows rather
     than one is what separates depth from a drop shadow: the tight one says
     the object rests somewhere, the wide one says how far above. */
  --resurs-plate-face-top:    #FFFFFF;
  --resurs-plate-face-bottom: #EFF2F6;
  --resurs-plate-light:       rgba(255, 255, 255, 0.95);
  --resurs-plate-seat:        rgba(16, 22, 34, 0.06);
  /* The cast is one whole shadow rather than a colour, so the hover state
     swaps a single token instead of restating the stack. */
  --resurs-plate-cast:        0 7px 16px -5px rgba(16, 22, 34, 0.16);
  --resurs-plate-cast-lifted: 0 10px 22px -6px rgba(16, 22, 34, 0.22);

  /* --- motion --------------------------------------------------------- */
  --resurs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --resurs-quick: 180ms;
}

/* Widths below the 1440 canvas the goldens were measured on. Type and gutters
 * are re-declared here rather than in site/, so a component never carries a
 * breakpoint of its own and the whole scale still swaps as one file. */
:root { --resurs-gutter: var(--resurs-inset); --resurs-card-gap: 15px; }

@media (max-width: 1080px) {
  :root {
    --resurs-gutter: 40px;
    --resurs-size-display: 44px;
    --resurs-size-heading: 38px;
    --resurs-size-lead: 17px;
    --resurs-sheet-pad-top: 34px;
    --resurs-gap-head: 36px;
    --resurs-gap-section: 40px;
    --resurs-gap-cards: 36px;
  }
}

@media (max-width: 560px) {
  :root {
    --resurs-gutter: 20px;
    --resurs-size-display: 34px;
    --resurs-size-heading: 30px;
    --resurs-size-lead: 16px;
    --resurs-size-body: 16px;
    --resurs-size-mark: 18px;
    --resurs-radius-sheet: 18px;
    --resurs-radius-panel: 20px;
    --resurs-sheet-pad-top: 28px;
    --resurs-gap-head: 28px;
    --resurs-gap-label: 14px;
    --resurs-gap-rule: 22px;
    --resurs-gap-section: 32px;
    --resurs-gap-cards: 28px;
    --resurs-sheet-pad-bottom: 48px;
  }
}

/* --- main-integrate: tokens the second act needs, moved in from
 * mocks/main2/fable/fable.tokens.css on the pick (its own comment named this
 * move). Same --resurs-* namespace, same rule: a component never carries a
 * literal. */
:root {
  --resurs-accent-hover: #0A3FC6;
  --resurs-accent-soft:  #E4ECFC;
  --resurs-on-accent:    #FFFFFF;

  /* A placeholder that must never be mistaken for content: dashed, muted. */
  --resurs-placeholder-edge: #C9CED6;
  --resurs-placeholder-ink:  #7A8090;

  /* The counters. The open one stands on the tint, the compressed one on the
     surface; the number is the largest type on the sheet after the heading. */
  --resurs-size-counter: 96px;
  --resurs-counter-open:  3;   /* flex-grow of the open counter */
  --resurs-counter-shut:  1;   /* flex-grow of the compressed one */
  --resurs-counter-min-height: 420px;
  --resurs-slow: 420ms;

  --resurs-size-kicker: 13px;
  --resurs-size-title:  32px;
  --resurs-size-signoff: 28px;
}
@media (max-width: 1080px) {
  :root { --resurs-size-counter: 72px; --resurs-size-title: 28px; --resurs-counter-min-height: 380px; }
}
@media (max-width: 560px) {
  :root { --resurs-size-counter: 56px; --resurs-size-title: 24px; --resurs-size-signoff: 22px; --resurs-counter-min-height: 0px; }
}