/* lloyds — token source (SITE CHROME "studio" pack)
 *
 * The ONE source of truth for the studio chrome's values. Two tiers, exactly as
 * every real client pack does (clone of system/tokens.neutral.css's shape):
 *   1. PRIMITIVES   — the studio palette (quiet/editorial, frames the exhibit).
 *   2. SEMANTIC MAP — the contract tokens (--color-fg/bg/accent/…) bound to those primitives.
 *
 * Load order on every page: system/tokens.contract.css → THIS FILE → system/components.css.
 * Values sourced verbatim from lloyds/brand-packs.md "Site chrome — studio".
 * Components must reference the SEMANTIC tokens below — never a primitive, never a literal.
 *
 * This pack is NOT one of the five bank skins — it is the quiet frame around them.
 * Neutral and editorial on purpose: the bank skins (system/banks.css, --j-* tokens)
 * carry all the colour; studio stays out of their way.
 */

/* Self-hosted faces (bundled woff2, repo-hosted). @import must precede all rules.
   Path: system/tokens.lloyds.css → ../fonts/fonts.css (Homizio + Montserrat Ace,
   reused verbatim from trainline/portfolio/fonts/ per the build brief). */
@import url("../fonts/fonts.css");

:root {
  /* ============================================================
     1. PRIMITIVES — studio palette (raw values, brand-packs.md)
     ============================================================ */
  --color-ink:         #14171E;   /* near-black — content base */
  --color-slate:       #565E6C;   /* muted — labels, captions, secondary text */
  --color-indigo:      #3446A0;   /* accent — links only, used sparingly */
  --color-indigo-hov:  #283A88;
  --color-indigo-act:  #202D6E;   /* not specified in brand-packs.md; darkened ~15% further
                                      than hover for a pressed state, same hue family */
  --color-paper:       #F6F7F9;   /* cool paper — page ground */
  --color-white:       #FFFFFF;   /* surface — cards sit whiter than the ground */
  --color-line:        #E2E5EA;   /* 1px lines, dividers */
  --color-ink-deep:    #10131A;   /* inverse bg — footer */
  --color-mist:        #E7EAF0;   /* inverse fg — footer text */

  /* Fonts — self-hosted (already in the repo; reused verbatim, no re-export) */
  --font-display: "Homizio", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Montserrat Ace", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (8 steps, 4px base — unchanged from the factory default) */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Radius — studio is 4px everywhere ("systems/editorial"; brand-packs.md is explicit
     that this is a single flat value, not a scale, so all three tiers collapse to it) */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* Shadows (ink-tinted, very low alpha — quiet chrome, no drama) */
  --shadow-sm: 0 1px 2px rgba(20, 23, 30, 0.06);
  --shadow-md: 0 4px 6px rgba(20, 23, 30, 0.08);
  --shadow-lg: 0 10px 15px rgba(20, 23, 30, 0.10);

  /* Layout */
  --maxw:   1200px;
  --gutter: 24px;

  /* Type ramp — generic modular scale (unchanged from the factory default;
     brand-packs.md specifies faces and radius, not a custom scale) */
  --type-display: clamp(40px, 6vw, 76px);
  --type-h1:      clamp(32px, 4vw, 56px);
  --type-h2:      clamp(24px, 2.5vw, 34px);
  --type-h3:      20px;
  --type-lead:    clamp(18px, 1.5vw, 22px);
  --type-body:    16px;
  --type-caption: 13px;
  --type-eyebrow: 12px;

  /* ============================================================
     2. SEMANTIC MAP — the contract, bound to studio primitives.
     ============================================================ */

  /* Foreground / surface (light context) */
  --color-fg:            var(--color-ink);
  --color-fg-muted:      var(--color-slate);   /* 6.10:1 on --color-bg — verified AA */
  --color-bg:            var(--color-paper);
  --color-bg-surface:    var(--color-white);
  --color-border:        var(--color-line);
  --color-border-strong: var(--color-ink);

  /* Accent */
  --color-accent:           var(--color-indigo);      /* 7.74:1 on --color-bg — verified AA for link use */
  --color-accent-hover:     var(--color-indigo-hov);
  --color-accent-active:    var(--color-indigo-act);
  --color-accent-fg:        var(--color-white);        /* 8.30:1 on --color-accent — verified AA */
  --color-accent-secondary: var(--color-slate);

  /* Inverse (content sitting on a dark surface) */
  --color-bg-inverse:           var(--color-ink-deep);
  --color-fg-on-inverse:        var(--color-mist);
  --color-fg-on-inverse-strong: var(--color-white);
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 50%, transparent);
  --color-fg-on-inverse-soft:   color-mix(in srgb, var(--color-fg-on-inverse) 82%, transparent);
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 12%, transparent);
  --color-inverse-wash:         color-mix(in srgb, var(--color-fg-on-inverse) 6%,  transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--color-white) 50%, transparent);
}