/* ========================================================================== weareswarm.online — shared token map + interior component system ========================================================================== Every colour and type value below resolves to a --brand-* token from assets/css/weareswarm-brand.css, which is a byte-for-byte copy of the weareswarm.site SSOT. This mirrors the alias pattern weareswarm-theme.css uses on .site, so the two domains stay one brand by construction. Raw hex or rgba() literals in this file are a governance violation: they mean .online has started drifting into a brand of its own again. Alpha variants are composed with color-mix() from a brand token so the source colour stays single-sourced. This file declares no @import. Load order is explicit and versioned in each page's : weareswarm-brand.css, then this file, then nav-shell.css, then swarm-system.css. That is deliberate — an @import chain cannot be cache-busted, so a token change here would keep serving a stale copy to anyone who had already loaded the old one. The ?v= stamp on the links is the only thing that reliably invalidates it. ========================================================================== */ :root { color-scheme: dark; /* --- Surfaces -------------------------------------------------------- */ --swarm-bg: var(--brand-bg); --swarm-bg-soft: var(--brand-bg-raised); --swarm-surface: var(--brand-surface); --swarm-surface-2: var(--brand-surface-2); --swarm-panel: color-mix(in srgb, var(--brand-text) 6%, transparent); --swarm-panel-soft: color-mix(in srgb, var(--brand-text) 3%, transparent); --swarm-panel-strong: color-mix(in srgb, var(--brand-text) 9%, transparent); --swarm-line: var(--brand-line); --swarm-line-soft: color-mix(in srgb, var(--brand-line-strong) 50%, transparent); /* --- Ink ------------------------------------------------------------- */ --swarm-text: var(--brand-text); --swarm-muted: var(--brand-muted); /* --- Accents ---------------------------------------------------------- Brand policy: cyan is the canonical identity accent. --swarm-blue was .online's old primary interaction colour, so it maps onto brand cyan; --swarm-mint keeps the soft-accent role it already played. */ --swarm-blue: var(--brand-accent); --swarm-mint: var(--brand-accent-soft); --swarm-green: var(--brand-accent-soft); --swarm-violet: var(--brand-accent-alt); --swarm-gold: var(--brand-warn); --swarm-red: var(--brand-danger); /* --- Accent washes (fills, borders, glows) --------------------------- */ --swarm-accent-wash: color-mix(in srgb, var(--brand-accent-soft) 10%, transparent); --swarm-accent-edge: color-mix(in srgb, var(--brand-accent-soft) 28%, transparent); --swarm-accent-edge-strong: color-mix(in srgb, var(--brand-accent-soft) 46%, transparent); --swarm-accent-glow: color-mix(in srgb, var(--brand-accent-soft) 50%, transparent); --swarm-info-wash: color-mix(in srgb, var(--brand-accent) 10%, transparent); --swarm-info-edge: color-mix(in srgb, var(--brand-accent) 30%, transparent); --swarm-info-glow: color-mix(in srgb, var(--brand-accent) 50%, transparent); --swarm-warn-wash: color-mix(in srgb, var(--brand-warn) 10%, transparent); --swarm-warn-edge: color-mix(in srgb, var(--brand-warn) 32%, transparent); --swarm-warn-glow: color-mix(in srgb, var(--brand-warn) 45%, transparent); --swarm-danger-wash: color-mix(in srgb, var(--brand-danger) 9%, transparent); --swarm-danger-edge: color-mix(in srgb, var(--brand-danger) 32%, transparent); --swarm-danger-glow: color-mix(in srgb, var(--brand-danger) 45%, transparent); --swarm-violet-wash: color-mix(in srgb, var(--brand-accent-alt) 12%, transparent); --swarm-violet-edge: color-mix(in srgb, var(--brand-accent-alt) 34%, transparent); --swarm-hairline: color-mix(in srgb, var(--brand-text) 8%, transparent); --swarm-hairline-soft: color-mix(in srgb, var(--brand-text) 3%, transparent); /* --- Structure ------------------------------------------------------- */ --swarm-shadow: 0 22px 70px color-mix(in srgb, var(--brand-bg) 72%, transparent); --swarm-radius-sm: var(--radius-sm); --swarm-radius-md: var(--radius-md); --swarm-radius-lg: var(--radius-lg); --swarm-radius-pill: var(--radius-pill); --swarm-shell: 1180px; /* --- Type ------------------------------------------------------------ */ --swarm-sans: var(--brand-font-sans); --swarm-mono: var(--brand-font-mono); /* Compatibility with route-local token names. */ --bg: var(--swarm-bg); --surface: var(--swarm-surface); --surface2: var(--swarm-surface-2); --panel: var(--swarm-surface); --card: var(--swarm-surface-2); --border: var(--swarm-line); --line: var(--swarm-line); --text: var(--swarm-text); --white: var(--swarm-text); --muted: var(--swarm-muted); --accent: var(--swarm-mint); --green: var(--swarm-mint); --amber: var(--swarm-gold); --gold: var(--swarm-gold); --blue: var(--swarm-blue); --purple: var(--swarm-violet); --red: var(--swarm-red); --body: var(--swarm-sans); --display: var(--swarm-sans); --mono: var(--swarm-mono); } * { box-sizing: border-box; } html { background: var(--swarm-bg); scroll-behavior: smooth; } body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 8% -8%, var(--swarm-info-wash), transparent 34rem), radial-gradient(circle at 92% 0%, var(--swarm-accent-wash), transparent 32rem), var(--swarm-bg); color: var(--swarm-text); font-family: var(--swarm-sans); line-height: 1.55; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--swarm-hairline-soft) 1px, transparent 1px), linear-gradient(90deg, var(--swarm-hairline-soft) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--brand-bg) 75%, transparent), transparent 78%); } body > * { position: relative; z-index: 1; } ::selection { background: var(--swarm-accent-edge); color: var(--swarm-text); } a { color: var(--swarm-mint); text-decoration: none; } a:hover { text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--swarm-blue); outline-offset: 3px; } .wrap, .swarm-shell, .page-shell { width: min(var(--swarm-shell), calc(100% - 40px)); max-width: var(--swarm-shell); margin-inline: auto; } .wrap { padding-inline: 0; } main.wrap, main.swarm-shell, main.page-shell { padding-bottom: 56px; } header, .hero, .page-hero { padding: 34px 0 28px; } .eyebrow, .kicker, .section-label, .stat-label, .metric-label { color: var(--swarm-gold); font-family: var(--swarm-mono); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; } h1, .hero h1, .page-hero h1 { max-width: 1040px; margin: 12px 0 18px; color: var(--swarm-text); font-family: var(--swarm-sans); font-size: clamp(2.55rem, 7vw, 5.4rem); font-weight: 900; letter-spacing: -0.058em; line-height: 0.96; text-wrap: balance; } h1 span, .hero h1 span, .page-hero h1 span { color: var(--swarm-blue); } h2, .title, .card h2, .level .title { margin: 0 0 10px; color: var(--swarm-text); font-family: var(--swarm-sans); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 850; letter-spacing: -0.025em; line-height: 1.08; } h3, .card h3 { margin: 0 0 8px; color: var(--swarm-text); font-family: var(--swarm-sans); font-weight: 800; } p, li, .desc, .intro, .sub, .meta { color: var(--swarm-muted); } .intro, .hero-copy, .page-intro { max-width: 860px; margin-top: 0; padding: 0; border: 0; color: var(--swarm-muted); font-family: var(--swarm-sans); font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.75; } section, .section { margin: 0; padding: 30px 0; border-top: 1px solid var(--swarm-line-soft); } .stats, .metric-grid, .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 22px 0 30px; padding: 0; background: transparent; border: 0; } .stat, .metric-card, .summary-card { min-width: 0; padding: 18px; overflow: hidden; background: linear-gradient(180deg, var(--swarm-panel), var(--swarm-panel-soft)); border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); box-shadow: none; } .stat-value, .metric-value { display: block; margin-top: 6px; color: var(--swarm-text); font-family: var(--swarm-sans); font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; } .grid, .levels, .card-grid, .data-grid, .branch-grid, .service-grid, .agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0 0 34px; padding: 0; background: transparent; border: 0; } .card, .level, .panel, .node, .service, .package, .branch, .agent-card, .proof-card { min-height: 0; padding: 20px; overflow: hidden; background: linear-gradient(180deg, var(--swarm-panel), var(--swarm-panel-soft)); border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-lg); box-shadow: none; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; } .card:hover, .level:hover, .panel:hover, .node:hover, .service:hover, .package:hover, .branch:hover, .agent-card:hover, .proof-card:hover { background: linear-gradient(180deg, var(--swarm-panel-strong), var(--swarm-panel-soft)); border-color: var(--swarm-accent-edge-strong); transform: translateY(-2px); } .levels { grid-template-columns: 1fr; } .level { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: 22px; } .level-num { color: var(--swarm-blue); font-family: var(--swarm-sans); font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 950; letter-spacing: -0.06em; line-height: 0.92; } .tag, .badge, .status, .status-pill, .priority, .chip { display: inline-flex; align-items: center; width: fit-content; gap: 6px; padding: 5px 9px; border: 1px solid var(--swarm-accent-edge); border-radius: var(--swarm-radius-pill); background: var(--swarm-accent-wash); color: var(--swarm-mint); font-family: var(--swarm-mono); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } .status.partial, .status.warn, .badge.warn, .tag.gold, .priority { border-color: var(--swarm-warn-edge); background: var(--swarm-warn-wash); color: var(--swarm-gold); } .status.locked, .status.blocked, .badge.blocked, .tag.blocked { border-color: var(--swarm-danger-edge); background: var(--swarm-danger-wash); color: var(--swarm-red); } .status.pass, .status.done, .badge.kids, .badge.ok, .tag.ok { border-color: var(--swarm-accent-edge); background: var(--swarm-accent-wash); color: var(--swarm-mint); } .badge.agent, .badge.victor, .tag.info { border-color: var(--swarm-info-edge); background: var(--swarm-info-wash); color: var(--swarm-blue); } .proof, .proof-strip, code, .mono { font-family: var(--swarm-mono); } .proof, .proof-strip { margin-top: 14px; padding: 12px 14px; overflow-wrap: anywhere; background: var(--swarm-bg-soft); border: 1px solid var(--swarm-line); border-radius: 14px; color: var(--swarm-text); font-size: 0.83rem; line-height: 1.6; } code { padding: 0.12em 0.35em; border-radius: 6px; background: var(--swarm-info-wash); color: var(--swarm-text); font-size: 0.9em; } .links, .actions, .card-actions, .button-row { display: flex; flex-wrap: wrap; gap: 9px; } .btn, .button, .actions a, .card-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 14px; border: 1px solid var(--swarm-line); border-radius: var(--swarm-radius-pill); background: var(--swarm-surface-2); color: var(--swarm-text); font-family: var(--swarm-sans); font-size: 0.82rem; font-weight: 850; letter-spacing: 0; text-transform: none; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .btn:hover, .button:hover, .actions a:hover, .card-actions a:hover { border-color: var(--swarm-accent-edge-strong); background: var(--swarm-accent-wash); color: var(--swarm-mint); transform: translateY(-1px); } .btn-purple, .btn-blue, .btn-green, .btn-amber, .btn-primary { border-color: var(--swarm-accent-edge); background: var(--swarm-accent-wash); color: var(--swarm-mint); } .btn-ghost, .btn.secondary { border-color: var(--swarm-line); background: transparent; color: var(--swarm-muted); } .toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 190px)); gap: 10px; margin: 0 0 22px; } input, select, textarea, button { font: inherit; } input, select, textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--swarm-line); border-radius: 12px; background: var(--swarm-bg-soft); color: var(--swarm-text); font-family: var(--swarm-mono); font-size: 0.78rem; } .checklist { display: grid; gap: 8px; margin-top: 15px; color: var(--swarm-muted); font-family: var(--swarm-sans); font-size: 0.88rem; } .checklist div::before { content: "→ "; color: var(--swarm-mint); } .empty, .error, .ok, .data-state, .loading-state, .empty-state, .error-state, .stale-state { margin: 0 0 22px; padding: 16px 18px; border: 1px dashed var(--swarm-line); border-radius: var(--swarm-radius-md); background: var(--swarm-hairline-soft); color: var(--swarm-muted); font-family: var(--swarm-mono); font-size: 0.8rem; } .error, .error-state { border-color: var(--swarm-danger-edge); color: var(--swarm-red); } .ok { border-color: var(--swarm-accent-edge); color: var(--swarm-mint); } .stale-state { border-color: var(--swarm-warn-edge); color: var(--swarm-gold); } .meta { color: var(--swarm-blue); font-weight: 750; } footer, .footer { margin-top: 24px; padding: 30px 0; border-top: 1px solid var(--swarm-line-soft); color: var(--swarm-muted); font-family: var(--swarm-mono); font-size: 0.74rem; } [data-tone="ok"] { border-color: var(--swarm-accent-edge); } [data-tone="warn"] { border-color: var(--swarm-warn-edge); } [data-tone="block"] { border-color: var(--swarm-danger-edge); } @media (max-width: 860px) { .toolbar { grid-template-columns: 1fr 1fr; } .level { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wrap, .swarm-shell, .page-shell { width: min(100% - 28px, var(--swarm-shell)); } header, .hero, .page-hero { padding-top: 24px; } h1, .hero h1, .page-hero h1 { font-size: clamp(2.35rem, 14vw, 4rem); } .stats, .metric-grid, .summary-grid, .grid, .levels, .card-grid, .data-grid, .branch-grid, .service-grid, .agent-grid, .toolbar { grid-template-columns: 1fr; } .card, .level, .panel, .node, .service, .package, .branch, .agent-card, .proof-card { padding: 17px; border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }