/* site/system/tokens.fin.css: layer 2 of 3, the CLIENT PACK.
 *
 * This pack binds the contract to Fin's own design language, observed from the live
 * fin.ai/integrations page on 2026-08-19: computed styles, :root custom properties and component
 * geometry, read from the page rather than guessed. The repo owner directed the swap (d-048); the
 * earlier Kettle pack and the distance it kept are recorded in d-008 and in git history. Kettle
 * itself survives as the fictional customer inside the scenarios; this file is the SITE's skin.
 *
 * Two tiers live here, and the split is the whole point of the layer. The upper block holds Fin's
 * raw observed values: THE ONLY PLACE IN THIS REPO A COLOUR LITERAL MAY APPEAR. Every name in it is
 * prefixed --fin-, so no raw value name can collide with a contract slot name. The lower block
 * binds every contract colour and font slot to one of them.
 *
 * THE TWO BANNER COMMENTS BELOW ARE LOAD-BEARING. Gate group 6 splits this file on the second banner
 * to derive the raw-value name list for its S1b check. It asserts each banner appears EXACTLY ONCE
 * in the file and that the derived list is non-empty. Do not reword the banners, and do not quote
 * them anywhere else in this file.
 *
 * Load order on every page: tokens.contract.css -> THIS FILE -> components.css -> page CSS.
 * A re-skin is a swap of this one file, which is what this commit is.
 *
 * Colours are tuned against gate group 8's ten contrast pairs, not pasted blind. Two of Fin's
 * observed values fail WCAG AA where the contract carries text or measured hairlines, and A1
 * outranks fidelity: their black-alpha hairline (roughly #ddddd8 opaque) is far below the 3:1
 * non-text floor, so the border slot binds their darker black-50 ramp value instead; and their
 * orange reads about 3.2:1 against white, so it is never bound to a text-on-light slot. On the
 * dark ground the same orange measures over 5.5:1 and binds the on-inverse accent directly.
 *
 * Faces: Fin runs Saans, SaansMono and Serrif by Displaay, all commercial and not redistributable,
 * and P2 requires self-hosted fonts. Inter (SIL OFL) stands in as the nearest open grotesque and
 * the substitution is disclosed here and in d-048. BOTH SUBSETS SHIP: the B3 disclaimer contains
 * ē, ņ and š (U+0113, U+0146, U+0161), all in latin-ext, so dropping that file would render the
 * one string on the site that must be exact in a fallback face mid-sentence. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ============================================================
     1. PRIMITIVES: Fin's raw observed values
     ============================================================ */

  /* Ink and grounds. Fin's pages sit black text on an off-white ground with white raised cards
     and near-zero shadows: the raised surface is LIGHTER than the page, the opposite polarity to
     the Kettle pack this file replaces. */
  --fin-ink:        #000000;   /* body and heading text, observed on both pages */
  --fin-off-black:  #111111;   /* their --color-off-black: primary buttons, dark ground */
  --fin-off-white:  #faf9f6;   /* their --color-off-white: page and nav ground */
  --fin-white:      #ffffff;   /* card and alternating section ground */

  /* The action pair. Fin's primary button is off-black and its observed hover is their helpdesk
     blue, so the accent slots carry action-black with the blue as its hover, not the orange. */
  --fin-blue:       #0007cb;   /* their --color-helpdesk, observed live as the primary hover */
  --fin-blue-deep:  #000f83;   /* their blueprint ramp, one step darker, for :active */

  /* The signal. Orange is Fin's punctuation: active pills, the 8px eyebrow squares, highlight
     text. About 3.2:1 on the light ground, so it is bound only to non-text signal slots there;
     5.9:1 on the off-black ground, where it carries the on-inverse accent as text. */
  --fin-orange:     #ff5600;   /* their --color-fin */

  /* Greys, from Fin's own opaque black ramp rather than invented: black-60 for muted text
     (5.66:1 on the off-white ground), black-50 for the measured hairline (3.93:1, clearing the
     3:1 non-text floor their true 10% hairline does not), black-40 for muted text on the dark
     ground (6.2:1 on off-black). */
  --fin-grey-mid:   #626260;
  --fin-grey-line:  #7b7b78;
  --fin-grey-lift:  #949491;

  /* One face for display and body, weight-axis variable, standing in for Saans as disclosed
     above. --font-mono stays on the system stack, standing in for SaansMono without a third
     fetched file. */
  --fin-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fin sets every observed weight at 400 and lets size and tracking carry the hierarchy. */
  --fin-weight: 400;

  /* ============================================================
     2. SEMANTIC MAP: the contract, bound to Fin primitives.
        (Overrides the neutral defaults in tokens.contract.css.)
     ============================================================ */

  /* Foreground / surface (light context) */
  --color-fg:            var(--fin-ink);         /* 19.8:1 on --color-bg */
  --color-fg-muted:      var(--fin-grey-mid);    /* 5.66:1 on --color-bg */
  --color-bg:            var(--fin-off-white);
  --color-bg-surface:    var(--fin-white);       /* raised cards are WHITE on the off-white page */
  --color-border:        var(--fin-grey-line);   /* 3.93:1 on --color-bg */
  --color-border-strong: var(--fin-off-black);
  --color-white:         var(--fin-white);

  /* Accent: the ACTION colour. Fin's buttons are off-black resting, helpdesk blue on hover. */
  --color-accent:            var(--fin-off-black);
  --color-accent-hover:      var(--fin-blue);
  --color-accent-active:     var(--fin-blue-deep);
  --color-accent-fg:         var(--fin-white);      /* 17.9:1 on --color-accent */
  --color-accent-secondary:  var(--fin-orange);     /* the signal: discs, live markers, the briefing rule */
  --color-accent-on-inverse: var(--fin-orange);     /* 5.9:1 on --color-bg-inverse, so the raw orange carries text there */

  /* Inverse (content sitting on the dark ground) */
  --color-bg-inverse:           var(--fin-off-black);
  --color-fg-on-inverse:        var(--fin-off-white);   /* 17.6:1 on --color-bg-inverse */
  --color-fg-on-inverse-strong: var(--fin-white);
  /* OPAQUE, because this one carries text: the footer's legal line. The pair is enumerated and a
     value group 8 cannot resolve is a failure rather than a skip. */
  --color-fg-on-inverse-muted:  var(--fin-grey-lift);   /* 6.2:1 on --color-bg-inverse */
  /* Derived at runtime, so these two carry no static value. Never bind a TEXT slot to one. */
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 12%, transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--color-white) 50%, transparent);

  /* Fonts and weight */
  --font-display: var(--fin-font-sans);
  --font-body:    var(--fin-font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-ui: var(--fin-weight);

  /* Spacing, radius, shadow, layout, motion and the type ramp are inherited from the contract
     unchanged. Fin's observed radii are 4px on buttons and 8px on cards, which are the contract's
     own --radius-sm and --radius-md defaults, so unlike the pack this replaces, no radius rebind
     is needed: the fall-through IS the binding. */
}