/* ============================================================================ DESIGN TOKENS — single source of truth for every color, shadow, radius, etc. ---------------------------------------------------------------------------- NEW DESIGN (cosplay-kingdom): deep-indigo surfaces, magenta gradient accents, gold highlights. Solid panels replace the old glassmorphism. TWO LAYERS: 1. PALETTE (raw colors) → the ONLY thing a theme needs to override. 2. SEMANTIC TOKENS → derived from the palette with color-mix(). Components must ONLY use these; never raw hex. ========================================================================== */ /* LOADED ONCE, SITE-WIDE, from templates/fragments/header.html. Do NOT `@import url(root.css)` from another sheet — that was how this file ended up resolved a dozen times per page, one CSSOM copy per importer, and how a page sheet ended up three serialized round trips away from its own tokens. Every page renders the site header, so the tokens are always present; anything that somehow does not (the templates/test/* pages) has to link this file itself. */ :root { /* ════════════════════════════════════════════════════════════════ LAYER 1 — PALETTE (override these per theme) ════════════════════════════════════════════════════════════════ */ /* Brand hues — drive gradients, buttons, active states */ --brand-1: #a044ff; /* primary (violet) — gradient start */ --brand-2: #ff2fb0; /* secondary (magenta) — gradient end */ --brand-3: #e935c1; /* tertiary (pink) — accents, nav underline */ --brand-btn-1: #a044ff; /* accent button start */ --brand-btn-2: #ff2fb0; /* accent button end */ /* Surface hues — the deep-indigo stack of the new design */ --bg-body-1: #4038c2; /* body gradient top */ --bg-body-2: #3a31b5; /* body gradient middle */ --bg-body-3: #372ea8; /* body gradient bottom */ --hero-1: #251c7a; /* hero band top */ --hero-2: #2e2494; /* hero band bottom */ --panel-solid: #453cc0; /* floating panel base */ --card-solid: #443bb0; /* card body */ --menu-solid: #3a30ab; /* dropdown / menu base */ --thumb-solid: #2c2480; /* image placeholder bg */ /* Backdrop shown behind the transparent default-avatar silhouette. Header avatar and user search cards must match, so it lives here. */ --avatar-empty-bg: linear-gradient(1deg, #7259b6, #6b6ed3); --tag-solid: #8f89dd; /* DEPRECATED: old solid tag pill. Tags now use --tag-bg below. */ /* Status hues — one base color each; tints/borders are derived */ --hue-success: #10b981; --hue-danger: #ef4444; --hue-warning: #f59e0b; --hue-info: #007bff; --hue-gold: #f5b301; /* highlight / focus / "featured" */ --surface-tint: #ffffff; /* color used for light overlays */ --shadow-tint: #0a0532; /* color used for dark shadows */ --text-on-surface: #ffffff; /* base text color */ /* ════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC TOKENS (derived; components use ONLY these) ════════════════════════════════════════════════════════════════ */ /* ── Aliases kept from the old palette (do not hardcode these hues) ── */ --accent-primary: var(--brand-1); --accent-secondary: var(--brand-2); --accent-tertiary: var(--brand-3); --accent-primary-btn: var(--brand-btn-1); --accent-secondary-btn: var(--brand-btn-2); --color-gold: var(--hue-gold); --color-success: var(--hue-success); --color-danger: var(--hue-danger); --color-warning: var(--hue-warning); --color-info: var(--hue-info); /* ── Text ────────────────────────────────────────────────────────── */ --color-text: var(--text-on-surface); --color-text-muted: color-mix(in srgb, var(--text-on-surface) 72%, transparent); --color-text-subtle: color-mix(in srgb, var(--text-on-surface) 50%, transparent); --color-text-soft: color-mix(in srgb, var(--text-on-surface) 60%, transparent); /* light tints for text sitting on a status-colored background */ --color-danger-text: color-mix(in srgb, var(--hue-danger) 55%, white); --color-success-text: color-mix(in srgb, var(--hue-success) 55%, white); --color-warning-text: color-mix(in srgb, var(--hue-warning) 55%, white); --color-gold-text: color-mix(in srgb, var(--hue-gold) 75%, white); /* ── White overlays (light surfaces at increasing opacity) ──────── */ --overlay-xs: color-mix(in srgb, var(--surface-tint) 5%, transparent); --overlay-sm: color-mix(in srgb, var(--surface-tint) 10%, transparent); --overlay-md: color-mix(in srgb, var(--surface-tint) 15%, transparent); --overlay-lg: color-mix(in srgb, var(--surface-tint) 20%, transparent); --overlay-xl: color-mix(in srgb, var(--surface-tint) 30%, transparent); --overlay-xxl: color-mix(in srgb, var(--surface-tint) 50%, transparent); --overlay-dark: color-mix(in srgb, var(--shadow-tint) 30%, transparent); --overlay-dark-md: color-mix(in srgb, var(--shadow-tint) 50%, transparent); --overlay-dark-lg: color-mix(in srgb, var(--shadow-tint) 70%, transparent); /* ── Status tints (soft backgrounds / borders / hovers) ──────────── */ --success-bg: color-mix(in srgb, var(--hue-success) 20%, transparent); --success-bg-hover: color-mix(in srgb, var(--hue-success) 30%, transparent); --success-border: color-mix(in srgb, var(--hue-success) 50%, transparent); --danger-bg: color-mix(in srgb, var(--hue-danger) 20%, transparent); --danger-bg-hover: color-mix(in srgb, var(--hue-danger) 30%, transparent); --danger-border: color-mix(in srgb, var(--hue-danger) 50%, transparent); --danger-border-strong: color-mix(in srgb, var(--hue-danger) 60%, transparent); --warning-bg: color-mix(in srgb, var(--hue-warning) 20%, transparent); --warning-bg-hover: color-mix(in srgb, var(--hue-warning) 30%, transparent); --warning-border: color-mix(in srgb, var(--hue-warning) 50%, transparent); --gold-bg-soft: color-mix(in srgb, var(--hue-gold) 10%, transparent); --gold-bg: color-mix(in srgb, var(--hue-gold) 20%, #ffca3691); --gold-bg-hover: color-mix(in srgb, var(--hue-gold) 30%, transparent); --gold-border: color-mix(in srgb, var(--hue-gold) 50%, transparent); --primary-bg: color-mix(in srgb, var(--brand-1) 20%, transparent); --primary-bg-hover: color-mix(in srgb, var(--brand-1) 30%, transparent); --primary-border: color-mix(in srgb, var(--brand-1) 50%, transparent); /* Selected state for the illustrated option tiles in forms (commission / group type, group privacy, build & category milestones, journal mood). One token pair so every picker reads the same when picked. */ --selected-border: var(--brand-2); --selected-bg: color-mix(in srgb, var(--brand-2) 50%, transparent); /* ── Gradients (all derived from palette hues) ──────────────────── */ --gradient-primary: linear-gradient(90deg, var(--brand-1), var(--brand-2)); --gradient-primary-subtle: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 30%, transparent), color-mix(in srgb, var(--brand-2) 30%, transparent)); --gradient-success: linear-gradient(45deg, var(--hue-success), color-mix(in srgb, var(--hue-success) 80%, black)); --gradient-danger: linear-gradient(45deg, var(--hue-danger), color-mix(in srgb, var(--hue-danger) 80%, black)); --gradient-warning: linear-gradient(45deg, var(--hue-warning), color-mix(in srgb, var(--hue-warning) 80%, black)); --gradient-gold: linear-gradient(45deg, var(--hue-gold), #ff9f1a); --gradient-info: linear-gradient(45deg, var(--hue-info), color-mix(in srgb, var(--hue-info) 70%, black)); --gradient-body: linear-gradient(180deg, var(--bg-body-1) 0%, var(--bg-body-2) 45%, var(--bg-body-3) 100%); /* hero band: dark indigo fading into the body + violet radial glow */ --gradient-hero: linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 78%, color-mix(in srgb, var(--hero-2) 0%, transparent) 100%), radial-gradient(ellipse at 55% 0%, color-mix(in srgb, var(--brand-1) 28%, transparent), transparent 60%); /* ── Surfaces (solid panels replace the old glassmorphism) ──────── */ --panel-bg: linear-gradient(180deg, var(--overlay-sm), var(--overlay-xs)), var(--panel-solid); --panel-border: 1px solid color-mix(in srgb, var(--surface-tint) 50%, transparent); --card-bg: var(--card-solid); --card-border: 1px solid var(--overlay-sm); --menu-bg: var(--popup-bg-solid); --bell-dropdown: rgb(89 37 169); /* ── Avatar ring ───────────────────────────────────────────────── THE single source of truth for the ring around every avatar on the site — header, cards, comments, notifications, chat, popups, the profile header. It used to be five different values (white 30%, white 50%, gold 50%, a gold color-mix, --overlay-xl) picked per file, so the same face got a different outline on every page. Widths used to stay per-component (2px on a 40px face, 4px on a 120px one), which meant the same person's picture was outlined differently on the profile header, in a card byline and in a popup. One width now, for every size of face. DO NOT declare an avatar border anywhere but base/avatar.css — that sheet lists every avatar class and is loaded site-wide. A `border:` in a component or page sheet lands later in the cascade at the same specificity and silently wins, which is how the ring fragmented in the first place. --avatar-border-color is here for the few rules that colour something else to match the ring. */ --avatar-border-color: var(--surface-tint); --avatar-border: 2px solid var(--avatar-border-color); /* ── Tag chips ─────────────────────────────────────────────────── The single source of truth for how a tag looks. Consumed only by the canonical `.tag` rule in base/tag.css — do not restyle tags per page; change these tokens instead. */ --tag-bg: var(--overlay-lg); --tag-border: 1px solid var(--overlay-xl); --tag-radius: var(--radius-lg); /* Kept names: many components still reference the glass tokens. They now resolve to the new solid-panel look. */ --glass-bg: var(--panel-bg); --glass-blur: blur(20px); --glass-blur-sm: blur(5px); --glass-border: var(--panel-border); /* ── Popup / modal system ──────────────────────────────────────── THE single source of truth for how every popup on the site looks. Consumed by base/popup-common.css (and by the commission-manager's .cmi-modal-* family, which is the same skeleton under other names). Do NOT hardcode a popup background, scrim or blur anywhere else — change these tokens instead, and every popup follows. */ --popup-bg-solid: rgba(80, 50, 130); --popup-bg: rgba(80, 50, 130, 0.93); /* standard panel fill */ --popup-blur: blur(25px); /* blur behind the panel */ --popup-border: 2px solid rgba(255, 255, 255, 0.3); --popup-radius: 22px; --popup-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); --popup-divider: 1px solid rgba(255, 255, 255, 0.15); /* The darkening + blur applied to the PAGE behind any popup. One value for every popup, nested pickers included, so stacking two popups never double-darkens into a different shade. */ --popup-scrim: rgba(0, 0, 0, 0.65); --popup-scrim-blur: blur(4px); /* ── Shadows ─────────────────────────────────────────────────────── */ --shadow-card: 0 14px 34px color-mix(in srgb, var(--shadow-tint) 35%, transparent); --shadow-card-hover: 0 15px 50px color-mix(in srgb, var(--hue-gold) 40%, transparent); --shadow-modal: 0 8px 32px color-mix(in srgb, var(--shadow-tint) 30%, transparent); --shadow-menu: 0 14px 30px color-mix(in srgb, var(--shadow-tint) 50%, transparent); --shadow-primary: 0 6px 18px color-mix(in srgb, var(--brand-2) 35%, transparent); --shadow-primary-lg: 0 8px 24px color-mix(in srgb, var(--brand-2) 55%, transparent); --shadow-success: 0 4px 15px color-mix(in srgb, var(--hue-success) 40%, transparent); --shadow-success-lg: 0 6px 20px color-mix(in srgb, var(--hue-success) 50%, transparent); --shadow-danger: 0 4px 15px color-mix(in srgb, var(--hue-danger) 40%, transparent); --shadow-danger-lg: 0 6px 20px color-mix(in srgb, var(--hue-danger) 60%, transparent); --shadow-gold: 0 0 20px color-mix(in srgb, var(--hue-gold) 30%, transparent); /* ── Border radius ───────────────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 15px; --radius-xl: 18px; --radius-xxl: 25px; --radius-pill: 999px; /* ── Typography ──────────────────────────────────────────────────── */ --font-main: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; /* ── Transitions ─────────────────────────────────────────────────── */ --transition: all 0.3s ease; /* ── Button hover — THE one interactive response ────────────────── Every button on the site reacts to the pointer the same way: a small white highlight over whatever fill it has, and a 1px lift. The three knobs below are the whole vocabulary; base/button-hover.css is the only sheet that reads them. Tune the feel here, once, and it changes everywhere — do not re-declare a hover on a button in page CSS. WHY A LIGHT LAYER AND NOT `filter: brightness()`. brightness() multiplies colour channels and leaves alpha alone, so it brightens the gradient buttons beautifully and does NOTHING to the translucent "glass" ones (rgba white stays rgba white) or to a flat saturated fill like the YouTube red (255 x 1.12 clips back to 255). Those buttons used to compensate with a background swap of their own on hover, which is exactly the divergence this replaces. The layer is added with `plus-lighter` so it brightens rather than washes out — the value below was matched against the old brightness(1.12) channel by channel; see base/button-hover.css. */ --btn-hover-sheen: 0.08; /* strength of the added highlight */ --btn-hover-lift: -1px; /* translateY on hover */ --btn-hover-speed: 0.15s; --btn-transition: transform var(--btn-hover-speed) ease, opacity var(--btn-hover-speed) ease; /* ── Legacy aliases (old class names still reference these) ─────── */ --bg-card: var(--overlay-sm); --border-color: var(--overlay-lg); --filter-bg: var(--overlay-sm); --filter-border: 1px solid var(--overlay-lg); }