/* ============================================================ OCTOPUS DESIGN TOKENS — v3.1.0 redesign foundation ============================================================ Source-of-truth: docs/design-preview/design_handoff_octopus/colors_and_type.css (Octopus Design System — 2026-05-01 design package, OFL+ISC vendored). This file is loaded BEFORE web/style.css on every top-level HTML page. Phase landing: F1 (Gitea #540) — @font-face block (self-hosted Geist + Geist Mono) F2 (Gitea #541) — vendored lucide-icons (separate file: web/js/vendor/lucide.min.js) F3 (Gitea #542 — THIS PHASE) — full :root token block + 13-page insertion. Tokens live alongside legacy vars in web/style.css; no rule yet uses them. 0 visual diff guaranteed. v3.1.0 Phase 2 — global skin pass: replaces legacy hex in style.css with var(--brand-*) / var(--neutral-*) / etc. First phase that visibly uses these tokens. ============================================================ */ /* ---------- TYPE — WEBFONTS (v3.1.0-F1) ---------- */ /* Geist + Geist Mono variable fonts (weight 100-900), self-hosted under /fonts/. Source: vercel/geist-font v1.8.0 — see web/fonts/VERSION.txt for provenance. font-display: swap → text renders immediately in fallback while woff2 loads. */ @font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2-variations"), url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("/fonts/Geist-VariableItalic.woff2") format("woff2-variations"), url("/fonts/Geist-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations"), url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-VariableItalic.woff2") format("woff2-variations"), url("/fonts/GeistMono-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ============================================================ DESIGN TOKENS (v3.1.0-F3) ============================================================ Ported verbatim from docs/design-preview/design_handoff_octopus/colors_and_type.css (the source-of-truth design package). Values are NOT consumed by any current style rule — they live alongside legacy vars in web/style.css. v3.1.0 Phase 2 (global skin pass) is the first phase that swaps style.css rules to use these. ============================================================ */ :root { /* ---------- BRAND COLOR PALETTE ---------- */ /* Deep navy badge — the "dark tech" surface the octopus emerges from */ --brand-abyss-950: #050b1a; --brand-abyss-900: #0a1628; --brand-abyss-800: #0f2138; --brand-abyss-700: #15304f; /* Cyan — the bioluminescent accent. Used SPARINGLY. */ --brand-cyan-300: #67e8f9; --brand-cyan-400: #22d3ee; /* primary accent */ --brand-cyan-500: #06b6d4; /* default UI cyan */ --brand-cyan-600: #0891b2; /* pressed / on hover bg */ --brand-cyan-700: #0e7490; --brand-cyan-50: #ecfeff; /* tint backgrounds */ --brand-cyan-100: #cffafe; /* ---------- NEUTRALS (warm-cool slate) ---------- */ --neutral-0: #ffffff; --neutral-25: #fafbfc; --neutral-50: #f5f7fa; --neutral-100: #eef1f6; --neutral-200: #e2e7ef; --neutral-300: #cbd2dd; --neutral-400: #94a0b3; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* ---------- SEMANTIC — STATUS ---------- */ /* Asset health / alert severity. The 50/500/700 base ladder is the design package source-of-truth; the *-300 tints (added in v3.1.0 Phase 2 / Gitea #545) cover light-on-dark text on tinted alert backgrounds — a real gap the original ladder didn't address. */ --status-online-50: #ecfdf5; --status-online-300: #6ee7b7; /* alert-success text on tint */ --status-online-500: #10b981; /* "Online", "Healthy" */ --status-online-700: #047857; --status-warning-50: #fffbeb; --status-warning-300: #fcd34d; /* readonly-banner border, alert-warning tint text */ --status-warning-500: #f59e0b; /* "Warning", "Degraded" */ --status-warning-700: #b45309; --status-critical-50: #fef2f2; --status-critical-300: #fca5a5; /* alert-error text on tint */ --status-critical-500: #ef4444; /* "Critical", "Offline" */ --status-critical-700: #b91c1c; --status-info-50: var(--brand-cyan-50); --status-info-300: var(--brand-cyan-300); /* alert-info text on tint */ --status-info-500: var(--brand-cyan-500); --status-info-700: var(--brand-cyan-700); --status-neutral-50: var(--neutral-100); --status-neutral-500: var(--neutral-500); --status-neutral-700: var(--neutral-700); /* ---------- SEMANTIC — SURFACES ---------- */ --bg-canvas: var(--neutral-25); /* app background */ --bg-surface: var(--neutral-0); /* cards, panels */ --bg-surface-2: var(--neutral-50); /* nested cards, inputs */ --bg-surface-3: var(--neutral-100); /* hover row */ --bg-inverse: var(--brand-abyss-900); /* logo badge, terminal */ --bg-tint-cyan: var(--brand-cyan-50); /* ---------- SEMANTIC — BORDERS ---------- */ --border-subtle: var(--neutral-200); /* default divider */ --border-default: var(--neutral-300); /* input border */ --border-strong: var(--neutral-400); --border-focus: var(--brand-cyan-500); --border-inverse: var(--brand-abyss-700); /* ---------- SEMANTIC — TEXT ---------- */ --fg-1: var(--neutral-900); /* primary headings, body text */ --fg-2: var(--neutral-700); /* secondary text */ --fg-3: var(--neutral-500); /* meta, captions, timestamps */ --fg-4: var(--neutral-400); /* placeholders, disabled */ --fg-on-inverse: var(--neutral-0); --fg-on-inverse-2: #94a3b8; --fg-accent: var(--brand-cyan-700); --fg-link: var(--brand-cyan-700); /* ---------- TYPE — FAMILIES ---------- */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace; /* ---------- TYPE — SIZE / WEIGHT / LINE ---------- */ --fs-xs: 12px; --lh-xs: 16px; --fs-sm: 13px; --lh-sm: 18px; --fs-base: 14px; --lh-base: 20px; /* product default — dense ops UI */ --fs-md: 15px; --lh-md: 22px; --fs-lg: 17px; --lh-lg: 24px; --fs-xl: 20px; --lh-xl: 28px; --fs-2xl: 24px; --lh-2xl: 32px; --fs-3xl: 30px; --lh-3xl: 36px; --fs-4xl: 38px; --lh-4xl: 44px; --fs-5xl: 48px; --lh-5xl: 52px; --fs-6xl: 64px; --lh-6xl: 68px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono-caps: 0.06em; /* ---------- SPACING (4px rhythm) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- RADII ---------- */ --radius-xs: 3px; /* tags, mono code chips */ --radius-sm: 5px; /* buttons, inputs */ --radius-md: 8px; /* cards, popovers */ --radius-lg: 12px; /* panels, dialogs */ --radius-xl: 16px; /* hero, badge */ --radius-pill: 999px; /* ---------- ELEVATION (subtle, layered, slate-tinted) ---------- */ --shadow-xs: 0 1px 1px 0 rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px 0 rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.16), 0 4px 8px -4px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.22); --shadow-inner-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); --shadow-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.28); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* primary ease — calm, technical */ --ease-emphasis: cubic-bezier(0.3, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; }