Brand
Guidelines

# iceConnect — complete brand & build system  (marketing assets AND product/app UI)
# Paste this entire block into Claude (or any AI tool), then describe the asset
# you need. Apply EVERY rule below to ALL output, without exception.
# Source of truth — latest system & downloadable assets: brand.iceconnect.com

## HOUSE STYLE
  Minimal, calm, confident. Slate-dominant, brass used sparingly, generous whitespace,
  restrained motion, plain language — a trusted advisor, not a loud vendor.
  NEVER use emoji as icons or decoration; Lucide line icons only.

## COMPANY
  iceConnect — UK Managed Service Provider (MSP). "Twenty years of innovation."
  We deliver IT support, cyber security, cloud, communications and AI services to
  small and mid-sized UK businesses. Offices: London HQ (Finchley), Chelmsford,
  Johannesburg. Strapline style: "Reliable. Scalable. Secure."
  Audience: business owners and managers — NOT IT specialists. They buy outcomes
  (uptime, security, predictable monthly cost), never technology for its own sake.
  Web www.iceconnect.com · Email hello@iceconnect.com · Tel 020 3358 0000
  Support portal: support.iceconnect.com

## AUDIENCE — ICP & personas
  ICP firmographic: 30–200 staff, regulated/process-heavy sectors. Primary:
  financial services (wealth managers, insurance brokers, corporate finance, IFAs,
  accountancy). Secondary: dental, manufacturing, logistics.
  Personas (canonical set): Overwhelmed Self-Manager · Dissatisfied Customer ·
  Post-Incident Survivor · Ambitious Scaler · Strategic Augmenter.

## SERVICES — ten pillars (use these names exactly; every asset speaks to at least one)
  01 IT Support — day-to-day support that keeps people productive
     (service desk & remote support, onsite support, user on/offboarding, device
      setup & deployment, hardware procurement & warranty, asset management &
      documentation, proactive monitoring/RMM, patch management, vendor management)
  02 Cyber Security — protection for your people, devices and data
     (endpoint protection EDR/XDR, managed detection & response, 24/7 SOC, email
      security & anti-phishing, DNS & web filtering, MFA & conditional access,
      identity & privileged access, awareness training, dark web monitoring)
  03 Governance, Risk & Compliance — proving and maintaining security posture
     (vulnerability management, penetration testing, DLP, Cyber Essentials & Plus,
      GDPR & data protection, data governance & retention, risk assessments,
      technology audits, policy & compliance support)
  04 Microsoft 365 & Productivity — helping teams work better together
     (licensing & optimisation, tenant management, Exchange Online, Teams,
      SharePoint & OneDrive, email migration, collaboration platforms, training)
  05 Cloud & Infrastructure — the platforms everything runs on
     (Azure & AWS, private & hybrid cloud, hosting & co-location, virtualisation,
      server & storage management, infrastructure design, monitoring, cloud
      migration, capacity planning)
  06 Network & On-Premise Infrastructure — the on-site backbone that connects it all
     (switching & LAN/WAN, Wi-Fi & guest networks, managed routers & firewalls,
      structured cabling, network design, network monitoring, site surveys)
  07 Communications & Connectivity — voice and connectivity that keep you reachable
     (business internet & leased lines, SD-WAN, VoIP & hosted telephony/SIP,
      Teams Calling, contact centre, call recording & reporting, auto attendants
      & call routing, business mobiles, continuity telephony)
  08 Backup & Business Continuity — confidence that you can recover from anything
     (Microsoft 365 backup, server & endpoint backup, cloud backup, disaster
      recovery, continuity planning, recovery testing, backup monitoring &
      compliance, ransomware recovery, high availability)
  09 AI & Automation — putting emerging technology to work for you
     (Copilot & adoption, AI readiness assessments, AI governance & security,
      process automation, Power Automate workflows, chatbots, knowledge
      management, custom AI solutions)
  10 Strategy & Projects — guidance and delivery for what comes next
     (vCIO/CIO services, IT roadmaps & strategic reviews, technology & budget
      planning, digital transformation, project delivery & migrations, office
      moves, M&A support, due diligence)

## FONTS (both free on Google Fonts)
  Headings: 'Bricolage Grotesque' Bold — titles, headlines, big numbers, hero only.
  Body:     'DM Sans' Regular/Bold — paragraphs, labels, captions, UI text, buttons.
  NEVER use optical-size variants (e.g. "DM Sans 14pt") — plain family names only.
  NEVER set body copy in Bricolage Grotesque; never use the heading font below 18pt.

## COLOURS — core (hex · RGB · CMYK · Pantone)
  slate     #0F172A  15,23,42     64,45,0,84  Pantone 5255 C — dark grounds, body text
  brass     #C8A35B  200,163,91   0,18,55,22  Pantone 4006 C — THE single accent:
            CTAs, highlights, key figures. Use sparingly.
  steel     #4E7CA1  78,124,161   52,23,0,37  Pantone 5415 C — muted secondary:
            charts & info only
  offwhite  #FAFAF8  250,250,248  — page background
  tint      #F1F5F9  241,245,249  — subtle fills / alternating bands
  brasstint #F6F3EB  246,243,235  — callout & highlight panel fills
  muted     #64748B  100,116,139  — secondary text
  border    #E2E8F0  226,232,240  — hairlines & dividers

## COLOURS — supporting (UI status states ONLY — never decorative,
## never in headings, CTAs, illustrations or backgrounds)
  Each status is a SET: tint background · base (icon/fill) · text (AA on white).
  Never use the base hue as text — use the text shade for any words.
    success  bg #DCFCE7 · base #22C55E · text #15803D
    warning  bg #FEF3C7 · base #D97706 · text #B45309  (deeper than brass — never confuse)
    error    bg #FEE2E2 · base #DC2626 · text #B91C1C
    info     bg #E8EFF5 · base #4E7CA1 · text #3B5F7D

## COLOUR RULES
  60/30/10 — 60% slate & neutrals / 30% steel & supporting / 10% brass.
  Approved pairings: white on slate · slate on brass · slate on off-white ·
  white on steel. NEVER white text on brass — brass is light; always slate text
  on brass fills, including buttons. For print, hand the CMYK/Pantone values
  above to the printer — never auto-convert from RGB.

## DATA VISUALISATION (charts, dashboards, reports — decks AND product UI)
  Keep series muted to match the brand; apply via your charting library's theme.
  categorical (distinct series, use IN ORDER — steel & brass lead):
    #4E7CA1 steel · #C8A35B brass · #4F9D8C teal · #8C6A93 plum · #C0795B clay · #64748B slate
    past six series, group the tail into "Other" or rethink the chart.
  sequential (one measure low→high, single-hue steel — heatmaps, intensity):
    #ECF2F7 · #C2D5E3 · #8FB1CB · #5E8BAC · #3B5F7D
  diverging (around a midpoint — SLA breach, headroom; status red/green ends):
    #B91C1C · #F2B8B8 · #F1F5F9 (neutral midpoint) · #A7E3BE · #15803D
  In-chart status: success #22C55E · warning #D97706 · error #DC2626.
  ALWAYS pair colour with a second cue (label, value or pattern) so charts read
  for colour-blind users and in greyscale. Dark mode: re-theme the chrome
  (gridlines, axes, background) — keep the series colours fixed.

## TYPE SCALE
  Hero/Display  54–60pt Bricolage Bold     H1  30pt Bricolage Bold
  H2  18–20pt Bricolage Bold               Body  11–14pt DM Sans Regular
  Caption  9–10pt DM Sans, tracked uppercase
  Line-height: headings tight (0.95–1.0×); body 1.2–1.3×.
  Left-align everything except cover and section titles. Never centre body copy.

## LOGO — never generate, redraw or re-export it; use the supplied files only
  Four-colour circular "C" mark (blue/orange/lime, magenta centre) + lowercase
  "iceconnect" wordmark — grey wordmark on light grounds, white wordmark on dark.
  Files: /assets/logo/ is NOT browsable — never guess a filename. Exact paths under
  brand.iceconnect.com/ (SVG is the primary web format):
    full logo, light ground → assets/logo/svg/iceconnect-logo-light-bg.svg
    full logo, dark ground  → assets/logo/svg/iceconnect-logo-dark-bg.svg
    full logo, one-colour   → ...-logo-mono-black.svg (light) / ...-logo-mono-white.svg (dark)
    icon only ("C" mark)    → assets/logo/svg/iceconnect-icon.svg
                              (+ ...-icon-mono-black.svg / ...-icon-mono-white.svg)
    favicon / app icons     → assets/logo/favicon/iceconnect-favicon.svg (+ -32/-64.png),
                              assets/logo/png/apple-touch-icon.png, web-app-icon-192/512.png
    other formats, same base names → png/<name>-<size>.png (full 300/600/1200,
                              icon 128/256/512/1024) · pdf/<name>.pdf · eps/<name>.eps
    previews & downloads → brand.iceconnect.com/#logo-downloads
  Place ONLY on slate, off-white or white. NEVER on brass, steel, any colour fill,
  or a busy photo without a slate scrim. Clear space = height of the "i" on all
  sides. Minimum 120px wide on screen / 25mm in print — smaller than that, use the
  icon-only mark (favicons at 16–32px use the simplified icon). Never stretch,
  recolour, rotate, add effects, or rebuild in another font. SVG is the primary
  web format; PNG only as fallback (favicons, social cards, some email clients).

## ICONS
  Lucide line icons ONLY (lucide.dev) — never filled/solid, never mixed sets,
  never multi-colour. ~1.75px stroke. Slate by default; brass for ONE key
  highlight per layout. Working set: users · server · gauge · triangle-alert ·
  headset · shield-half · scale · app-window · cloud · network · phone ·
  database · bot · target · circle-check · chart-line · clock-4 ·
  pound-sterling · lock · trending-up · handshake · map-pin
  Pillar pairings: 01 headset · 02 shield-half · 03 scale · 04 app-window ·
  05 cloud · 06 network · 07 phone · 08 database · 09 bot · 10 target
  List bullets: small brass circle-check — not dashes, not dots.

## PHOTOGRAPHY
  Premium, calm, real: real people in real UK workplaces, natural light, shallow
  depth of field, uncluttered compositions with breathing room, cool slightly
  desaturated grade that sits with slate. Where a brand tone is needed: subtle
  slate overlay or light brass highlight.
  AVOID: cheesy handshake/headset stock, harsh saturated colour, server-room
  clichés, heavy filters, busy backgrounds behind logos, staged or low-res images.

## COMPONENTS & SPACING  (exact specs: tokens.json component.* · CSS: theme.css .ic-*)
  Button (.ic-btn): radius 7px, DM Sans 700, padding md 11×20 / sm 8×14 / lg 14×26.
    Primary = brass fill + slate text (hover #BC9550, active #B89149); secondary = steel
    fill + white text (hover #456E8E); ghost = transparent + slate text + 1px #E2E8F0
    border (hover #F1F5F9). Focus 2px brass ring, 2px offset; disabled 40% opacity.
  Input (.ic-field): white fill, 1px #E2E8F0 border, radius 7px, padding 10×13; focus =
    brass border + 3px brass-tint ring; error = red border + 3px red-tint ring; ≥44px on mobile.
  Card (.ic-card): white fill, 1px #E2E8F0 border, elevation.sm, radius 12, padding 24.
  Callout (.ic-callout): brasstint fill + 3px brass left border, radius 8, padding 16×20.
  8px base spacing unit — use multiples of 8. Page margins: 24px web, 0.85in slides.
  Generous whitespace; align to a consistent left edge.

## VOICE — the audience runs businesses; they are NOT IT specialists
  Sound like: plain English a busy owner understands at a glance · confident and
  reassuring ("we have got this handled") · benefit before technology · warm and
  human, like a trusted advisor · specific and honest over vague or salesy.
  NEVER: acronym-stuffed, boastful or hyped, cold/corporate/robotic, patronising,
  or vague ("solutions", "synergy", "best-in-class").
  Say this, not that:
    "keep your systems running"  NOT  "maximise uptime / high availability"
    "protect your business"      NOT  "endpoint threat mitigation"
    "back up your data"          NOT  "immutable backup architecture"
    "we'll set it up for you"    NOT  "seamless deployment & onboarding"
    "help when you need it"      NOT  "24/7 SLA-backed support tiers"
  Example rewrite —
    BAD:  "Our proactive RMM platform leverages enterprise-grade SIEM and EDR to
          deliver best-in-class threat remediation across your entire estate."
    GOOD: "We watch over your computers around the clock and stop most problems
          before you'd ever notice them — so your team can just get on with work."

## DESIGN TOKENS (product / app UI) — reference by ROLE, never raw hex
  text.primary / text.secondary / text.inverse / text.on-accent
  bg.page / bg.surface / bg.muted / bg.inverse    ·    border.default / border.strong
  action.primary (brass, slate label) / action.secondary (steel, white label)
  focus.ring (brass)    ·    status.success | warning | error | info
  Ship light AND dark — swap the semantic layer; in dark mode separate surfaces with
  border.default, not shadow. Full light/dark values: brand.iceconnect.com/dist/tokens.json
  (CSS variables: brand.iceconnect.com/dist/theme.css).

## TYPE — screen units (alongside the print scale above)
  rem on a 16px base; iOS pt & Android sp use the same numbers (never hard-code dp).
  display 56 · title 32 · heading 22 · subheading 18 · body 16 · small 14 · caption 11

## SPACING / RADIUS / ELEVATION / LAYERING / MOTION (apps)
  spacing    8px base, 4px half-step: 4 8 12 16 24 32 48 64
  radius     sm 6 · md 8 · lg 12 · xl 20 · full 9999
  elevation  sm / md / lg soft slate shadows (use borders, not shadow, in dark mode)
  layering   z-index scale — base 0 · dropdown 1000 · sticky 1100 · overlay 1200 ·
             modal 1300 · popover 1400 · toast 1500 (stay on the scale, never 9999)
  breakpoint mobile-first min-widths — sm 375 · md 768 · lg 1024 · xl 1440
  motion     fast 120ms · base 180ms · slow 280ms · ease cubic-bezier(.2,0,0,1)
            pulse 2.4s ease-out infinite — expanding box-shadow ring radiating
            from live status dots (colour inherits status); pure CSS, no JS
            always honour prefers-reduced-motion

## COMPONENT STATES (apps)
  Build every control with default / hover / active / focus / disabled.
  Primary = brass + slate label · secondary = steel + white · ghost = bordered.
  Brass buttons darken on hover/active but keep slate text (white fails contrast on brass):
  hover #BC9550, active #B89149 — on DARK surfaces hover lightens to #D4B373 instead.
  Steel (secondary) darkens to #456E8E on hover.
  Inputs show focus (brass ring) & error (red). Icons via Lucide:
  lucide-react (web) / lucide-react-native (mobile).
  Microcopy: buttons = verbs ("Set up monitoring") · errors = what happened + the fix
  · empty states = one clear next action.

## STATUS INDICATORS (pills, banners & live dots)
  Built from the supporting-colour SET (tint bg · base · AA text). Always pair the
  colour with an icon or text so the state reads in greyscale and for colour-blind users.
  Status pill — a compact single state inline: a pill (radius full) with a 1px border,
    a short label and a status-coloured dot. Light surfaces: white fill, hairline border,
    muted text. Dark surfaces: translucent white fill/border, light text. Live/real-time
    states use the pulse (above). E.g. "All systems operational", "Agent offline".
  Status banner — an inline status message: a box in the status bg tint with a matching
    status icon, a bold title and a line of detail, text in the status text shade. One
    state per banner; use in dashboards, forms and reports.
  Reference by role (status.success|warning|error|info), never raw hex. Ready-made CSS
    ships in theme.css (.ic-pill, .ic-banner--*, .ic-dot).

## NAVIGATION
  Current location always marked brass + slate weight; everything else muted until
  hovered/active. Active indicator by surface: top bar & tabs = brass underline
  (2px links, 3px tabs); sidebar rows & mega-menu items = brass-tint fill + a 2px
  brass left-edge line that follows the corner radius (inset box-shadow). One primary
  action per bar. Icons ALWAYS carry a text label — never icon-only. Patterns: top bar
  (wide), mega-menu (multi-column top-bar dropdown for deep catalogues), tabs (within a
  page), breadcrumb (3+ levels), sidebar (app shells ≥1024px, collapsible groups),
  mobile (top bar + burger overlay, bottom tabs ≤5). Keep nav placement consistent
  across pages; back behaviour predictable.

## FORMS & STATES
  Visible label per input (never placeholder-only). Mark required fields; helper text
  below; validate on blur; error beside the field with an icon + words + a fix.
  Field states: default / focus (brass ring) / error (red) / disabled. Semantic input
  types for the right mobile keyboard; inputs ≥44px tall.
  Empty state — icon + short title + one clear next action, never a blank panel.
  Loading — skeleton (shimmer that reserves the layout) for loads >300ms, not a
  spinner; keep CLS < 0.1; skeleton honours prefers-reduced-motion.

## PERFORMANCE
  Fonts: font-display swap; preload only the two we use. Photos: WebP/AVIF + srcset,
  loading="lazy" below the fold (logos/icons stay SVG — never rasterise the mark).
  Reserve space (width/height or aspect-ratio) to keep CLS < 0.1. Defer non-critical
  scripts; split by route. Mobile-first at 375/768/1024/1440.

## ACCESSIBILITY (apps — WCAG 2.2 AA, non-negotiable)
  visible focus ring on every control · tap targets ≥44px iOS / 48dp Android
  pair every status colour with an icon or text · label every input & icon-only button
  respect prefers-reduced-motion · brass & steel are accents, NOT text on light grounds

## PLATFORM (apps)
  honour native conventions (iOS HIG / Android Material / web) for layout, navigation
  & gestures — apply iceConnect colour, type, icons & voice on top.

## OUTPUT CHECKLIST — verify before you finish
  [ ] UK English spelling, £ GBP, absolute ISO dates (e.g. 2026-06-24)
  [ ] Slate dominant, brass sparing, slate text on every brass fill
  [ ] Bricolage Grotesque headings / DM Sans body — nothing else
  [ ] Lucide line icons only, from the working set above — never emoji as icons
  [ ] Logo on a neutral ground, at least 120px wide
  [ ] Supporting colours used for status only, with the AA text shade for any words
  [ ] Charts: brand palette in order, colour paired with a label/value, readable in greyscale
  [ ] One clear call to action per asset
  [ ] Every sentence understandable by a non-technical business owner
  [ ] Product: every token referenced by role, with light AND dark both handled
  [ ] Product: visible focus ring + ≥44px / 48dp tap target on every control
  [ ] Product: mobile-first at 375/768/1024/1440; z-index on the named scale
  [ ] Product: skeletons for >300ms loads; reserve space so CLS < 0.1
  [ ] Icons from Lucide; logo from the supplied files, never generated

{
  "color": {
    "primitive": {
      "slate":        { "value": "#0F172A" },
      "slate-800":    { "value": "#1E293B" },
      "slate-700":    { "value": "#334155" },
      "slate-600":    { "value": "#475569" },
      "slate-500":    { "value": "#64748B" },
      "slate-300":    { "value": "#CBD5E1" },
      "slate-200":    { "value": "#E2E8F0" },
      "slate-100":    { "value": "#F1F5F9" },
      "offwhite":     { "value": "#FAFAF8" },
      "white":        { "value": "#FFFFFF" },
      "brass":        { "value": "#C8A35B" },
      "brass-hover":  { "value": "#BC9550" },
      "brass-hover-dark": { "value": "#D4B373", "comment": "hover on dark surfaces LIGHTENS brass (light surfaces darken it)" },
      "brass-active": { "value": "#B89149" },
      "brass-tint":   { "value": "#F6F3EB" },
      "steel":        { "value": "#4E7CA1" },
      "steel-hover":  { "value": "#456E8E" },
      "success":      { "value": "#22C55E" },
      "warning":      { "value": "#D97706" },
      "error":        { "value": "#DC2626" }
    },
    "semantic": {
      "light": {
        "text-primary":           { "value": "{color.primitive.slate}" },
        "text-secondary":         { "value": "{color.primitive.slate-500}" },
        "text-inverse":           { "value": "{color.primitive.white}" },
        "text-on-accent":         { "value": "{color.primitive.slate}" },
        "bg-page":                { "value": "{color.primitive.offwhite}" },
        "bg-surface":             { "value": "{color.primitive.white}" },
        "bg-muted":               { "value": "{color.primitive.slate-100}" },
        "bg-accent":              { "value": "{color.primitive.brass-tint}" },
        "bg-inverse":             { "value": "{color.primitive.slate}" },
        "border-default":         { "value": "{color.primitive.slate-200}" },
        "border-strong":          { "value": "{color.primitive.slate-300}" },
        "action-primary":         { "value": "{color.primitive.brass}" },
        "action-primary-hover":   { "value": "{color.primitive.brass-hover}" },
        "action-primary-active":  { "value": "{color.primitive.brass-active}" },
        "action-primary-text":    { "value": "{color.primitive.slate}" },
        "action-secondary":       { "value": "{color.primitive.steel}" },
        "action-secondary-hover": { "value": "{color.primitive.steel-hover}" },
        "action-secondary-text":  { "value": "{color.primitive.white}" },
        "focus-ring":             { "value": "{color.primitive.brass}" }
      },
      "dark": {
        "text-primary":           { "value": "{color.primitive.slate-100}" },
        "text-secondary":         { "value": "#94A3B8" },
        "text-inverse":           { "value": "{color.primitive.slate}" },
        "text-on-accent":         { "value": "{color.primitive.slate}" },
        "bg-page":                { "value": "{color.primitive.slate}" },
        "bg-surface":             { "value": "{color.primitive.slate-800}" },
        "bg-muted":               { "value": "{color.primitive.slate-700}" },
        "bg-accent":              { "value": "{color.primitive.slate-700}" },
        "bg-inverse":             { "value": "{color.primitive.offwhite}" },
        "border-default":         { "value": "{color.primitive.slate-700}" },
        "border-strong":          { "value": "{color.primitive.slate-600}" },
        "action-primary":         { "value": "{color.primitive.brass}" },
        "action-primary-hover":   { "value": "{color.primitive.brass-hover-dark}" },
        "action-primary-active":  { "value": "{color.primitive.brass-active}" },
        "action-primary-text":    { "value": "{color.primitive.slate}" },
        "action-secondary":       { "value": "{color.primitive.steel}" },
        "action-secondary-hover": { "value": "{color.primitive.steel-hover}" },
        "action-secondary-text":  { "value": "{color.primitive.white}" },
        "focus-ring":             { "value": "{color.primitive.brass}" }
      }
    },
    "status": {
      "success": { "bg": { "value": "#DCFCE7" }, "base": { "value": "#22C55E" }, "text": { "value": "#15803D" } },
      "warning": { "bg": { "value": "#FEF3C7" }, "base": { "value": "#D97706" }, "text": { "value": "#B45309" } },
      "error":   { "bg": { "value": "#FEE2E2" }, "base": { "value": "#DC2626" }, "text": { "value": "#B91C1C" } },
      "info":    { "bg": { "value": "#E8EFF5" }, "base": { "value": "#4E7CA1" }, "text": { "value": "#3B5F7D" } }
    },
    "chart": {
      "categorical": { "value": ["#4E7CA1", "#C8A35B", "#4F9D8C", "#8C6A93", "#C0795B", "#64748B"] },
      "sequential":  { "value": ["#ECF2F7", "#C2D5E3", "#8FB1CB", "#5E8BAC", "#3B5F7D"] },
      "diverging":   { "value": ["#B91C1C", "#F2B8B8", "#F1F5F9", "#A7E3BE", "#15803D"] }
    }
  },
  "font": {
    "family":     { "heading": { "value": "Bricolage Grotesque" }, "body": { "value": "DM Sans" } },
    "weight":     { "regular": { "value": "400" }, "medium": { "value": "500" }, "semibold": { "value": "600" }, "bold": { "value": "700" }, "extrabold": { "value": "800" } },
    "size":       { "display": { "value": "56px" }, "title": { "value": "32px" }, "heading": { "value": "22px" }, "subheading": { "value": "18px" }, "body": { "value": "16px" }, "small": { "value": "14px" }, "caption": { "value": "11px" } },
    "lineHeight": { "display": { "value": "0.95" }, "heading": { "value": "1.0" }, "body": { "value": "1.3" } }
  },
  "space":  { "2xs": { "value": "4px" }, "xs": { "value": "8px" }, "sm": { "value": "12px" }, "md": { "value": "16px" }, "lg": { "value": "24px" }, "xl": { "value": "32px" }, "2xl": { "value": "48px" }, "3xl": { "value": "64px" } },
  "radius": { "sm": { "value": "6px" }, "md": { "value": "8px" }, "lg": { "value": "12px" }, "xl": { "value": "20px" }, "full": { "value": "9999px" } },
  "breakpoint": { "sm": { "value": "375px" }, "md": { "value": "768px" }, "lg": { "value": "1024px" }, "xl": { "value": "1440px" } },
  "zIndex": { "base": { "value": "0" }, "dropdown": { "value": "1000" }, "sticky": { "value": "1100" }, "overlay": { "value": "1200" }, "modal": { "value": "1300" }, "popover": { "value": "1400" }, "toast": { "value": "1500" } },
  "elevation": {
    "sm": { "value": "0 1px 2px rgba(15,23,42,0.06)" },
    "md": { "value": "0 2px 8px rgba(15,23,42,0.08)" },
    "lg": { "value": "0 8px 24px rgba(15,23,42,0.12)" }
  },
  "motion": {
    "duration": { "fast": { "value": "120ms" }, "base": { "value": "180ms" }, "slow": { "value": "280ms" } },
    "easing":   { "value": "cubic-bezier(0.2,0,0,1)" },
    "pulse": {
      "duration":   { "value": "2.4s" },
      "easing":     { "value": "ease-out" },
      "iteration":  { "value": "infinite" },
      "ring": {
        "start": { "spread": { "value": "0 0 0 0" },   "alpha": { "value": "0.7" } },
        "end":   { "spread": { "value": "0 0 0 8px" }, "alpha": { "value": "0" } },
        "fadeBy":{ "value": "70%", "comment": "ring fully expanded & faded by 70% of the loop; remaining 30% is a rest beat" }
      },
      "comment": { "value": "Expanding box-shadow ring that radiates from a live/active status dot and fades, then rests before repeating. Colour inherits from the status the element carries. Pure CSS; honour prefers-reduced-motion." }
    }
  },
  "component": {
    "_comment": "Exact specs for the reusable brand components — the single source of truth that index.html, theme.css (.ic-* classes) and DESIGN.md spec tables all derive from. Colours reference primitives/semantics; dimensions are literal and checked against index.html by build-tokens.py.",
    "button": {
      "radius":        { "value": "7px" },
      "font-size":     { "value": "14px" },
      "font-weight":   { "value": "700" },
      "padding":       { "value": "11px 20px" },
      "padding-sm":    { "value": "8px 14px" },
      "font-size-sm":  { "value": "12.5px" },
      "padding-lg":    { "value": "14px 26px" },
      "font-size-lg":  { "value": "15px" },
      "focus-outline": { "value": "2px" },
      "focus-offset":  { "value": "2px" },
      "disabled-opacity": { "value": "0.4" },
      "primary":   { "bg": { "value": "{color.primitive.brass}" }, "text": { "value": "{color.primitive.slate}" }, "bg-hover": { "value": "{color.primitive.brass-hover}" }, "bg-active": { "value": "{color.primitive.brass-active}" } },
      "secondary": { "bg": { "value": "{color.primitive.steel}" }, "text": { "value": "{color.primitive.white}" }, "bg-hover": { "value": "{color.primitive.steel-hover}" } },
      "ghost":     { "bg": { "value": "transparent" }, "text": { "value": "{color.primitive.slate}" }, "border": { "value": "{color.primitive.slate-200}" }, "bg-hover": { "value": "{color.primitive.slate-100}" } }
    },
    "input": {
      "radius":       { "value": "7px" },
      "padding":      { "value": "10px 13px" },
      "font-size":    { "value": "14px" },
      "min-height-touch": { "value": "44px", "comment": "minimum tap target on mobile" },
      "ring-width":   { "value": "3px" },
      "focus-border": { "value": "{color.primitive.brass}" },
      "focus-ring":   { "value": "{color.primitive.brass-tint}" },
      "error-border": { "value": "{color.primitive.error}" },
      "error-ring":   { "value": "rgba(220,38,38,0.12)" }
    },
    "card": {
      "radius":       { "value": "12px" },
      "padding":      { "value": "24px" },
      "border-width": { "value": "1px" },
      "border":       { "value": "{color.primitive.slate-200}" },
      "bg":           { "value": "{color.primitive.white}" },
      "shadow":       { "value": "{elevation.sm}" }
    },
    "callout": {
      "radius":       { "value": "8px" },
      "padding":      { "value": "16px 20px" },
      "border-left":  { "value": "3px" },
      "border-color": { "value": "{color.primitive.brass}" },
      "bg":           { "value": "{color.primitive.brass-tint}" }
    },
    "pill": {
      "radius":      { "value": "9999px" },
      "padding":     { "value": "9px 17px 9px 15px" },
      "gap":         { "value": "10px" },
      "dot-size":    { "value": "9px" },
      "font-size":   { "value": "11px" },
      "font-weight": { "value": "500" }
    },
    "banner": {
      "radius":      { "value": "10px" },
      "padding":     { "value": "13px 15px" },
      "gap":         { "value": "11px" },
      "font-size":   { "value": "13.5px" }
    },
    "skeleton": {
      "radius":           { "value": "6px" },
      "shimmer-duration": { "value": "1.4s" },
      "base":             { "value": "{color.primitive.slate-100}" },
      "highlight":        { "value": "#E9EEF3" }
    },
    "nav": {
      "_comment": "Active-location indicator by surface — see DESIGN.md Appendix C.",
      "active-line":      { "value": "2px", "comment": "brass left-edge line on sidebar rows & mega-menu items; follows corner radius via inset box-shadow" },
      "active-underline": { "value": "2px", "comment": "brass underline on top-bar links & tabs" },
      "active-bg":        { "value": "{color.primitive.brass-tint}" },
      "tab-underline":    { "value": "3px" }
    }
  }
}

/* ==========================================================================
   iceConnect — theme.css
   Ready-to-paste CSS custom properties generated from the brand design system.
   Source of truth: https://brand.iceconnect.com  ·  machine-readable: /dist/tokens.json
   COUPLING: the core palette here mirrors tokens.json. If you change a brand
   colour, change it in tokens.json too and run `python3 tools/build-tokens.py --check`
   to confirm they still match (see tools/BUILD.md).
   Drop this into any web project and reference tokens with var(--ic-...).
   Light is the default; dark applies under prefers-color-scheme: dark
   OR when you set data-theme="dark" on a parent element.
   ========================================================================== */

:root {
  /* --- Primitive colours (raw values — avoid referencing directly in UI) --- */
  --ic-slate:        #0F172A;
  --ic-slate-800:    #1E293B;
  --ic-slate-700:    #334155;
  --ic-slate-600:    #475569;
  --ic-slate-500:    #64748B;
  --ic-slate-300:    #CBD5E1;
  --ic-slate-200:    #E2E8F0;
  --ic-slate-100:    #F1F5F9;
  --ic-offwhite:     #FAFAF8;
  --ic-white:        #FFFFFF;
  --ic-brass:        #C8A35B;
  --ic-brass-hover:  #BC9550;       /* darken brass on hover/active; keep slate text */
  --ic-brass-hover-dark: #D4B373;   /* dark surfaces LIGHTEN brass on hover instead */
  --ic-brass-active: #B89149;
  --ic-brass-tint:   #F6F3EB;
  --ic-steel:        #4E7CA1;
  --ic-steel-hover:  #456E8E;  /* darken steel on secondary-button hover */

  /* --- Semantic colours · light (reference THESE in UI, by role) --- */
  --ic-text-primary:     var(--ic-slate);
  --ic-text-secondary:   var(--ic-slate-500);
  --ic-text-inverse:     var(--ic-white);
  --ic-text-on-accent:   var(--ic-slate);     /* slate text on brass — never white */
  --ic-bg-page:          var(--ic-offwhite);
  --ic-bg-surface:       var(--ic-white);
  --ic-bg-muted:         var(--ic-slate-100);
  --ic-bg-accent:        var(--ic-brass-tint); /* callout / highlight panel fills */
  --ic-bg-inverse:       var(--ic-slate);
  --ic-border-default:   var(--ic-slate-200);
  --ic-border-strong:    var(--ic-slate-300);
  --ic-action-primary:        var(--ic-brass);
  --ic-action-primary-hover:  var(--ic-brass-hover);
  --ic-action-primary-active: var(--ic-brass-active);
  --ic-action-secondary:       var(--ic-steel);
  --ic-action-secondary-hover: var(--ic-steel-hover);
  --ic-focus-ring:       var(--ic-brass);

  /* --- Status sets · bg / base (icon, fill) / text (AA on white) --- */
  --ic-success-bg:   #DCFCE7;  --ic-success-base: #22C55E;  --ic-success-text: #15803D;
  --ic-warning-bg:   #FEF3C7;  --ic-warning-base: #D97706;  --ic-warning-text: #B45309;
  --ic-error-bg:     #FEE2E2;  --ic-error-base:   #DC2626;  --ic-error-text:   #B91C1C;
  --ic-info-bg:      #E8EFF5;  --ic-info-base:    #4E7CA1;  --ic-info-text:    #3B5F7D;

  /* --- Chart palettes (use categorical IN ORDER; steel & brass lead) --- */
  --ic-chart-1: #4E7CA1; /* steel */
  --ic-chart-2: #C8A35B; /* brass */
  --ic-chart-3: #4F9D8C; /* teal  */
  --ic-chart-4: #8C6A93; /* plum  */
  --ic-chart-5: #C0795B; /* clay  */
  --ic-chart-6: #64748B; /* slate */

  /* --- Typography --- */
  --ic-font-heading: 'Bricolage Grotesque', system-ui, sans-serif; /* headings ONLY, >=18px */
  --ic-font-body:    'DM Sans', system-ui, sans-serif;             /* body, UI, buttons */
  --ic-weight-regular:   400;
  --ic-weight-medium:    500;
  --ic-weight-semibold:  600;
  --ic-weight-bold:      700;
  --ic-weight-extrabold: 800;
  --ic-size-display:  56px;
  --ic-size-title:    32px;
  --ic-size-heading:  22px;
  --ic-size-sub:      18px;
  --ic-size-body:     16px;
  --ic-size-small:    14px;
  --ic-size-caption:  11px;
  --ic-lh-display: 0.95;
  --ic-lh-heading: 1.0;
  --ic-lh-body:    1.3;

  /* --- Spacing (8px base, 4px half-step) --- */
  --ic-space-2xs: 4px;
  --ic-space-xs:  8px;
  --ic-space-sm:  12px;
  --ic-space-md:  16px;
  --ic-space-lg:  24px;
  --ic-space-xl:  32px;
  --ic-space-2xl: 48px;
  --ic-space-3xl: 64px;

  /* --- Radius --- */
  --ic-radius-sm:   6px;   /* controls, inputs */
  --ic-radius-md:   8px;   /* buttons */
  --ic-radius-lg:   12px;  /* cards */
  --ic-radius-xl:   20px;  /* panels */
  --ic-radius-full: 9999px;

  /* --- Breakpoints (mobile-first min-widths; for @media and container queries) --- */
  --ic-bp-sm: 375px;   /* phone */
  --ic-bp-md: 768px;   /* tablet */
  --ic-bp-lg: 1024px;  /* laptop */
  --ic-bp-xl: 1440px;  /* desktop */

  /* --- Layering (z-index scale; stay on the scale, never ad-hoc 9999) --- */
  --ic-z-base:     0;     /* page content, normal flow */
  --ic-z-dropdown: 1000;  /* menus, selects */
  --ic-z-sticky:   1100;  /* sticky headers & toolbars */
  --ic-z-overlay:  1200;  /* modal scrim / backdrop */
  --ic-z-modal:    1300;  /* dialogs & sheets */
  --ic-z-popover:  1400;  /* popovers & tooltips */
  --ic-z-toast:    1500;  /* transient alerts — above all */

  /* --- Elevation (soft slate shadows; use borders, not shadow, in dark mode) --- */
  --ic-elevation-sm: 0 1px 2px rgba(15,23,42,0.06);
  --ic-elevation-md: 0 2px 8px rgba(15,23,42,0.08);
  --ic-elevation-lg: 0 8px 24px rgba(15,23,42,0.12);

  /* --- Motion --- */
  --ic-motion-fast: 120ms;
  --ic-motion-base: 180ms;
  --ic-motion-slow: 280ms;
  --ic-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --ic-pulse-duration: 2.4s;
  --ic-pulse-ease: ease-out;
}

/* --- Semantic colours · dark ---
   Swaps ONLY the semantic layer. In dark mode, separate surfaces with
   border-default rather than relying on shadow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-text-primary:   var(--ic-slate-100);
    --ic-text-secondary: #94A3B8;
    --ic-text-inverse:   var(--ic-slate);  /* flips with bg-inverse — else white-on-offwhite */
    --ic-bg-page:        var(--ic-slate);
    --ic-bg-surface:     var(--ic-slate-800);
    --ic-bg-muted:       var(--ic-slate-700);
    --ic-bg-accent:      var(--ic-slate-700);
    --ic-bg-inverse:     var(--ic-offwhite);
    --ic-border-default: var(--ic-slate-700);
    --ic-border-strong:  var(--ic-slate-600);
    /* primary hover LIGHTENS on dark surfaces; all other action + focus
       colours are intentionally unchanged in dark mode */
    --ic-action-primary-hover: var(--ic-brass-hover-dark);
  }
}

[data-theme="dark"] {
  --ic-text-primary:   var(--ic-slate-100);
  --ic-text-secondary: #94A3B8;
  --ic-text-inverse:   var(--ic-slate);
  --ic-bg-page:        var(--ic-slate);
  --ic-bg-surface:     var(--ic-slate-800);
  --ic-bg-muted:       var(--ic-slate-700);
  --ic-bg-accent:      var(--ic-slate-700);
  --ic-bg-inverse:     var(--ic-offwhite);
  --ic-border-default: var(--ic-slate-700);
  --ic-border-strong:  var(--ic-slate-600);
  --ic-action-primary-hover: var(--ic-brass-hover-dark);
}

/* --- Live status pulse — pure CSS, honours reduced motion ---
   Markup: <span class="ic-dot" style="--ic-gc:34,197,94"></span> (RGB triplet). */
.ic-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--ic-gc, 34,197,94));
  animation: ic-pulse var(--ic-pulse-duration) var(--ic-pulse-ease) infinite;
}
@keyframes ic-pulse {
  0%       { box-shadow: 0 0 0 0   rgba(var(--ic-gc, 34,197,94), 0.7); }
  70%,100% { box-shadow: 0 0 0 8px rgba(var(--ic-gc, 34,197,94), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ic-dot { animation: none; box-shadow: 0 0 0 3px rgba(var(--ic-gc, 34,197,94), 0.25); }
}

/* --- Status pill — compact inline state; pair with .ic-dot for "live" states ---
   Markup: <span class="ic-pill"><span class="ic-dot" style="--ic-gc:34,197,94"></span>All systems operational</span>
   On a dark surface, set data-theme="dark" on an ancestor for the translucent treatment. */
.ic-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--ic-radius-full);
  border: 1px solid var(--ic-border-default);
  background: var(--ic-bg-surface);
  color: var(--ic-text-secondary);
  padding: 9px 17px 9px 15px;
  font: var(--ic-weight-medium) 11px/1 var(--ic-font-body);
  letter-spacing: 0.01em; white-space: nowrap;
}
[data-theme="dark"] .ic-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: #94A3B8;
}

/* --- Status banner — an inline status message in its tint ---
   Markup: <div class="ic-banner ic-banner--warning"><svg.../><div>…</div></div>
   Always pair the colour with the icon or text (accessibility). */
.ic-banner {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid; border-radius: 10px;   /* component.banner.radius — tighter than card lg(12) */
  padding: 13px 15px; font: var(--ic-weight-regular) 13.5px/1.5 var(--ic-font-body);
}
.ic-banner--success { background: var(--ic-success-bg); border-color: #BBF7D0; color: var(--ic-success-text); }
.ic-banner--warning { background: var(--ic-warning-bg); border-color: #FDE68A; color: var(--ic-warning-text); }
.ic-banner--error   { background: var(--ic-error-bg);   border-color: #FECACA; color: var(--ic-error-text); }
.ic-banner--info    { background: var(--ic-info-bg);    border-color: #CFDEEA; color: var(--ic-info-text); }

/* --- Button — primary / secondary / ghost · sizes sm·md·lg · all states ---
   Markup: <button class="ic-btn ic-btn--primary">Set up monitoring</button>
   Slate text on brass (never white); brass darkens on hover/active. (component.button) */
.ic-btn {
  display: inline-block; font-family: var(--ic-font-body); font-weight: 700;
  font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px; padding: 11px 20px;
  transition: background var(--ic-motion-fast) var(--ic-motion-ease);
}
.ic-btn--sm { font-size: 12.5px; padding: 8px 14px; }
.ic-btn--lg { font-size: 15px;   padding: 14px 26px; }
.ic-btn--primary   { background: var(--ic-action-primary); color: var(--ic-text-on-accent); }
.ic-btn--primary:hover  { background: var(--ic-action-primary-hover); }
.ic-btn--primary:active { background: var(--ic-action-primary-active); }
.ic-btn--secondary { background: var(--ic-action-secondary); color: var(--ic-white); }
.ic-btn--secondary:hover { background: var(--ic-action-secondary-hover); }
.ic-btn--ghost { background: transparent; color: var(--ic-text-primary); border-color: var(--ic-border-default); }
.ic-btn--ghost:hover { background: var(--ic-bg-muted); }
.ic-btn:focus-visible { outline: 2px solid var(--ic-focus-ring); outline-offset: 2px; }
.ic-btn[disabled], .ic-btn--disabled { opacity: 0.4; pointer-events: none; }

/* --- Input / field — default · focus · error · disabled ---
   Markup: <input class="ic-field"> · add .ic-field--error for the error state.
   Pair with a visible <label>; on mobile ensure the control is ≥44px tall. (component.input) */
.ic-field {
  font-family: var(--ic-font-body); font-size: 14px; color: var(--ic-text-primary);
  background: var(--ic-bg-surface); border: 1px solid var(--ic-border-default);
  border-radius: 7px; padding: 10px 13px;
}
.ic-field:focus, .ic-field--focus {
  outline: none; border-color: var(--ic-focus-ring);
  box-shadow: 0 0 0 3px var(--ic-bg-accent);
}
.ic-field--error { border-color: var(--ic-error-base); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.ic-field[disabled], .ic-field--disabled { background: var(--ic-bg-muted); color: var(--ic-text-secondary); }

/* --- Card — the core content container (component.card) --- */
.ic-card {
  background: var(--ic-bg-surface); border: 1px solid var(--ic-border-default);
  border-radius: 12px; padding: 24px; box-shadow: var(--ic-elevation-sm);
}

/* --- Callout — brass-tint panel with a brass left border (component.callout) --- */
.ic-callout {
  background: var(--ic-bg-accent); border-left: 3px solid var(--ic-action-primary);
  border-radius: 8px; padding: 16px 20px; color: var(--ic-text-primary);
}

/* --- Skeleton — shimmer placeholder for loads >300ms; reserves layout (component.skeleton) ---
   Markup: <div class="ic-skeleton" style="height:12px;width:70%"></div> */
.ic-skeleton {
  background: linear-gradient(90deg, var(--ic-bg-muted) 25%, #E9EEF3 37%, var(--ic-bg-muted) 63%);
  background-size: 400% 100%; border-radius: 6px;
  animation: ic-shimmer 1.4s ease infinite;
}
@keyframes ic-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ic-skeleton { animation: none; } }