/* Skipton — semantic token CONTRACT (brand-agnostic)
 *
 * Cloned from the shared portfolio chassis contract for the Skipton Building Society
 * Senior Email Developer concept build. In this project there is no base/
 * generator, so this file IS the contract source of truth: hand-maintained, not a
 * generated mirror. Edit it only to declare a genuinely new semantic ROLE (rule S3).
 *
 * This is the interface between the base and the client pack. It declares every
 * semantic token the components in system/components.css reference, with NEUTRAL
 * fallback defaults (greyscale + one plain blue accent). No brand lives here.
 *
 * The Skipton pack (system/tokens.skipton.css) is loaded AFTER this file and
 * overrides these values with Skipton's own. With no pack loaded, the base still
 * renders as a coherent, unbranded neutral theme, proving the base carries structure,
 * not aesthetics.
 *
 * Rule: if a component or page starts using a new semantic token, declare it HERE
 * first (S3). Brand-specific VALUES (a real palette, fonts, radius, type scale) belong
 * in the pack, never here.
 */

:root {
  /* ---- Colour: foreground / surface (light context) ---- */
  --color-fg:            #1a1a1a;
  --color-fg-muted:      #6b7280;
  --color-bg:            #ffffff;
  --color-bg-surface:    #f4f4f5;
  --color-border:        #d4d4d8;
  --color-border-strong: #1a1a1a;
  --color-white:         #ffffff;

  /* ---- Colour: accent ---- */
  --color-accent:           #2563eb;
  --color-accent-hover:     #1d4ed8;
  --color-accent-active:    #1e40af;
  --color-accent-fg:        #ffffff;
  --color-accent-secondary: #64748b;

  /* ---- Colour: extended roles (declared per S3; bound by the pack) ----
     Carried over from the shared chassis: a loyalty role (a fill that pairs with dark
     text) and an urgent role (error / disruption, a text-safe red).
     Added for the previous build and kept (S3, declared here before any use):
       --color-sponsor       the paid-content fence and mark. A RULE colour, never
                             text. Skipton runs no sponsored content, so the pack
                             binds it to the muted grey.
       --color-sponsor-text  the same role when it must carry words. A text-safe
                             variant, AA on white.
       --color-brand         the single structural brand colour, for rules, large
                             marks and text on the dark band. Distinct from
                             --color-accent, which is the AA-safe link and button fill.
     Neutral defaults so an unbranded render stays coherent; the pack supplies the
     Skipton values. --color-brand is referenced by the chrome only through the pack.
     --color-loyalty and --color-urgent serve the email layer AND the journey exhibits
     (loyalty fills the selected persona pill, urgent colours the failed QA-gate chips),
     so the "chrome reskins with zero contract edits" proof stands on the wrapper pages.
     --color-sponsor is the one role that is email-only. */
  --color-loyalty:      #8a6d3b;
  --color-urgent:       #b91c1c;
  --color-sponsor:      #a1a1aa;
  --color-sponsor-text: #52525b;
  --color-brand:        #2563eb;
  /* Status text roles for the exhibit chips (S3): a confirmed state and a cautioned state
     that must carry small words. Neutral defaults; the pack binds them to its AA-safe values. */
  --color-confirm-text: #166534;
  --color-caution-text: #92400e;

  /* ---- Colour: inverse (content on a dark surface) ---- */
  --color-bg-inverse:           #1a1a1a;
  --color-fg-on-inverse:        #f4f4f5;
  --color-fg-on-inverse-strong: #ffffff;
  --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);

  /* ---- Fonts (neutral system stack; a pack picks real faces) ---- */
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing (generic 4px scale) ---- */
  --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 (non-zero default: radius is a brand choice, not a base rule) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Shadows (neutral, black-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

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

  /* ---- Type ramp (generic modular 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;
}