/* ============================================================
   TOKENS · TIER 2 — SEMANTIC CONTRACT  (the brand surface)
   ------------------------------------------------------------
   These are the token NAMES a project reskins. The Base owns the
   vocabulary; a project overrides only the VALUES, in ONE file:
   design-system/projects/<client>/tokens.css.

   The values below are neutral DEFAULTS — every project is
   expected to replace them. NEVER rename a token: the names are
   the contract that lets a brand skin swap in cleanly and that
   every block's CSS is written against.
   ============================================================ */

:root {
    /* ---- Type families ---- */
    --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    /* ---- Colour roles ----
       Tip for brand skins: tint the neutrals (surface/border/muted) with a few
       percent of the primary hue rather than using pure greys — it reads as
       designed, not default. */
    --color-bg:            #ffffff;   /* page background */
    --color-surface:       #ffffff;   /* cards / raised surfaces */
    --color-surface-2:     #f4f6f8;   /* muted / alternate surface */
    --color-surface-strong:#11151a;   /* dark / inverse section fill — a brand may tint this (the .u-bg-dark band reads it) */
    --color-text:          #1a1d21;   /* body copy */
    --color-text-muted:    #5b6470;   /* secondary copy */
    --color-text-invert:   #ffffff;   /* light text on a dark/strong fill */
    --color-heading:       #11151a;   /* headings */
    --color-primary:       #2f55ff;   /* brand / primary action */
    --color-primary-hover: #2241cc;   /* primary, hovered */
    --color-on-primary:    #ffffff;   /* text/icon on a primary fill — must contrast it */
    --color-secondary:     #5b6470;   /* second brand role (distinct from accent); default = a neutral */
    --color-accent:        #ff6b3d;   /* eyebrows, small highlights (<10% of a surface) */
    --color-border:        #e3e6ea;   /* hairline borders */
    --color-focus:         var(--color-primary);  /* focus ring */

    /* ---- State colours (feedback: forms, alerts, badges) ----
       Neutral-ish defaults; a brand may override. Each must reach ≥4.5:1 as text. */
    --color-success:       #2e7d4f;   /* 5.0:1 on white */
    --color-warning:       #946011;   /* 5.3:1 on white (amber dark enough for body text) */
    --color-danger:        #c0392b;   /* 5.4:1 on white */

    /* ---- Shadow tint (rgb channels consumed by the primitive shadows) ----
       A brand can warm/cool its shadows here, e.g. the primary's channels. */
    --shadow-color: 17 21 26;

    /* ---- Shape personality dial ----
       Point the UI radius at one of the frozen radii to set the brand's feel:
         var(--radius-sm)  → sharp / editorial
         var(--radius-md)  → balanced (default)
         var(--radius-lg)  → soft / friendly
         var(--radius-pill) on buttons → consumer / challenger
       Blocks and elements read --radius-ui, not a fixed radius. */
    --radius-ui: var(--radius-md);     /* surfaces: cards, inputs, tiles */
    --radius-button: var(--radius-pill); /* buttons (own dial — sharp brands set this to --radius-sm) */
}