/* ============================================================================ Ethica — Design Tokens (the single source of truth) ---------------------------------------------------------------------------- This file is the ONLY place colour/type/spacing/elevation values are defined. It is served verbatim at the stable URL /css/theme.css and linked by BOTH the Hugo pages (layouts/partials/ed-head.html) and the Python admin (server.py), BEFORE components.css and any page CSS. Theme model: dark is the default (:root). Light is opt-in via [data-theme="light"] on . Never hardcode a hex outside this file — reference a token. See assets/css/DESIGN.md. ========================================================================== */ :root { /* ---- Brand ---- */ --brand-name: "Ethica"; --brand-domain: "ethica.no"; /* ---- Logos / marks (used as background-image or ) ---- */ --logo-primary: url(/img/ethica-logo-white.svg); /* on dark */ --logo-monochrome: url(/img/ethica-logo.svg); /* navy, on light */ --logo-code: url(/img/ethica-logo-white.svg); --logo-mark: url(/img/ethica-icon.png); /* square app icon */ --logo-watermark: url(/img/ethica-logo-white.svg); /* faint Σ-E backdrop */ /* ---- Type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Comfortaa", ui-rounded, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* ---- Colour — backgrounds ---- */ --color-bg: #090d16; --color-bg-deep: #05080f; --color-bg-muted: #0e1524; /* ---- Colour — surfaces (translucent → glass) ---- */ --color-surface: rgba(120, 150, 190, .06); --color-surface-elevated: rgba(120, 150, 190, .10); --color-surface-hover: rgba(120, 150, 190, .14); /* ---- Colour — borders ---- */ --color-border: rgba(150, 175, 210, .15); --color-border-strong: rgba(150, 175, 210, .28); --color-border-soft: rgba(150, 175, 210, .08); /* ---- Colour — text ---- */ --color-text: #e9eef6; --color-text-muted: #93a6c0; --color-text-soft: #6f8198; --color-heading: #f4f8ff; /* ---- Colour — primary (soft blue accent) ---- */ --color-primary: #79b0ee; --color-primary-hover: #9cc3ef; --color-primary-soft: rgba(121, 176, 238, .12); --color-primary-glow: rgba(121, 176, 238, .34); --color-on-primary: #08111e; /* ---- Colour — secondary accent (deep navy) ---- */ --color-accent: #5b86c4; --color-accent-soft: rgba(91, 134, 196, .14); --color-navy: #364f6b; /* the brand stamp navy */ /* ---- Colour — status ---- */ --color-success: #7fc294; --color-warning: #c2a36a; --color-danger: #ff9a9a; --color-info: #79b0ee; /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-card: 0 14px 40px rgba(0, 0, 0, .50); --shadow-soft: 0 6px 18px rgba(0, 0, 0, .30); --shadow-panel: 0 10px 30px rgba(0, 0, 0, .40); --shadow-glow: 0 0 0 3px var(--color-primary-glow); /* ---- Layout ---- */ --layout-page-max: 1140px; --layout-content-max: 760px; --layout-wide-max: 1320px; --layout-sidebar: 300px; --layout-gap: 24px; --layout-header-height: 68px; /* ---- Spacing ---- */ --space-page-x: clamp(20px, 4vw, 44px); --space-section-y: clamp(48px, 7vw, 80px); --space-card: 24px; /* ---- App backdrop (shared by every surface: site + admin) ---- */ --bg-app: radial-gradient(1100px 620px at 78% -8%, rgba(60,95,150,.30), transparent 60%), radial-gradient(900px 700px at 8% 10%, rgba(54,79,107,.26), transparent 55%), linear-gradient(180deg, var(--color-bg-muted), var(--color-bg) 38%); color-scheme: dark; } /* ============================================================================ Light theme — opt-in via ========================================================================== */ :root[data-theme="light"] { --logo-primary: url(/img/ethica-logo.svg); --logo-code: url(/img/ethica-logo.svg); --logo-watermark: url(/img/ethica-logo.svg); --color-bg: #eef2f8; --color-bg-deep: #e2e8f2; --color-bg-muted: #ffffff; --color-surface: rgba(54, 79, 107, .05); --color-surface-elevated: rgba(54, 79, 107, .09); --color-surface-hover: rgba(54, 79, 107, .13); --color-border: rgba(24, 44, 72, .14); --color-border-strong: rgba(24, 44, 72, .26); --color-border-soft: rgba(24, 44, 72, .08); --color-text: #1d2b3d; --color-text-muted: #54657c; --color-text-soft: #76869b; --color-heading: #0f1d2e; --color-primary: #2f6db0; --color-primary-hover: #255a93; --color-primary-soft: rgba(47, 109, 176, .10); --color-primary-glow: rgba(47, 109, 176, .28); --color-on-primary: #ffffff; --color-accent: #2f6db0; --color-accent-soft: rgba(47, 109, 176, .12); --color-success: #2f8f57; --color-warning: #9c7a3c; --color-danger: #b5482f; --color-info: #2f6db0; --shadow-card: 0 12px 30px rgba(24, 44, 72, .14); --shadow-soft: 0 6px 16px rgba(24, 44, 72, .10); --shadow-panel: 0 10px 26px rgba(24, 44, 72, .12); color-scheme: light; }