/* theme/tokens.css
 *
 * The ONLY file in this kit that defines a design value. Every other file
 * references var(--...). Applying a design system, the client's or ours, means
 * replacing this file plus the images in portal/brand/, and nothing else.
 * tests/portability.test.mjs enforces the first half of that.
 *
 * This copy carries the client's own design system. Values are taken from the
 * design system's tokens, which were themselves derived from the supplied
 * brand guide and letterhead. Names below stay generic on purpose so the next
 * client's copy is a value swap, not a rename.
 *
 * Type is substituted, and the substitution is the design system's, not ours:
 * the brand guide ships its wordmark as outlines and names no face, so Figtree
 * stands in for the display face and Source Sans 3 for Myriad Pro on the
 * letterhead. Both are Open Font License and are served from this origin, not
 * from a font CDN, because the Content-Security-Policy in
 * staticwebapp.config.json is style-src 'self' and a client's portal should
 * not phone a third party on every page load. See theme/fonts/README.md.
 */

/* Both families are variable fonts, so one file covers the whole weight range
 * declared below. Latin subset only: the portal has no non-Latin copy. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  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;
}

:root {
  /* Surfaces. Mist is the brand's alternating-section tint and is the page
   * ground here, so the white cards read as cards without needing a heavy
   * border or shadow. */
  --c-bg: #fcf1f9;
  --c-surface: #ffffff;
  --c-border: #dedbdf;

  /* Text. Body is ink, headings are plum, and the two greys below are the
   * brand's neutral ramp rather than a blue-tinted one. */
  --c-fg-1: #1a1a1a;
  --c-fg-2: #57535a;
  --c-fg-3: #8b868d;
  --c-fg-heading: #96125e;

  /* Magenta is the action colour and is used sparingly: the active tab
   * underline, the avatar, and the focus ring. Plum is the press and heading
   * colour. There is no second hue in this brand. */
  --c-accent: #d91e8f;
  --c-accent-fg: #ffffff;
  --c-eyebrow: #d91e8f;

  /* Chips. The "Sample data" flag sits on blush with plum text, which reads as
   * informational rather than as a warning. Stale stays amber, because it is
   * the one state that must not look like brand decoration. */
  --c-flag-bg: #fbe0f1;
  --c-flag-fg: #96125e;
  --c-warn-bg: #fdf0dd;
  --c-warn-fg: #a45c00;

  /* Top bar. The brand keeps page headers solid white, so the bar is a white
   * plate with a hairline rule rather than the dark bar the neutral kit ships.
   * That also suits the supplied lockups, whose Australia outline and tagline
   * are black and only sit on white, mist or blush. */
  --c-nav-bg: #ffffff;
  --c-nav-border: #dedbdf;
  --c-nav-fg: #57535a;
  --c-nav-fg-on: #96125e;

  --font-body: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif;
  --font-display: "Figtree", "Century Gothic", system-ui, sans-serif;

  --fs-1: 12.5px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 22px;
  --fs-5: 34px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Rounded and organic, taken from the hand shapes in the mark: 18px on
   * cards, 12px on small surfaces, pills on avatars and chips. */
  --radius-1: 12px;
  --radius-2: 18px;
  --radius-pill: 999px;

  /* Shadows are plum-tinted, never neutral grey. */
  --shadow-1: 0 1px 2px rgba(150, 18, 94, 0.08), 0 8px 24px rgba(150, 18, 94, 0.1);

  /* A 3px ring outside the control's own border, in the mid pink tint. */
  --focus-ring: 0 0 0 3px #f296cd;

  --stage-max: 1180px;
  --topbar-h: 64px;
  --logo-h: 40px;
  --logo-h-compact: 32px;
}