/* gocomm-brand.css — single source of truth for ALL site color. Import once, site-wide, before your component styles. Every color the site uses is defined here as a token; nothing else should hardcode a hex value — reference these with var(--gc-*). */ :root{ /* ---- Fixed brand colors (identical in both themes) ---- */ --gc-green: #6cbe45; /* primary brand green */ --gc-green-deep: #5aab36; /* deeper green — sits better on light bg */ --gc-lime: #b6f06f; /* highlight (logo gradient top) */ --gc-on-green: #0d1310; /* text/icons placed ON a green fill */ /* ---- Neutral helpers (theme-independent, semi-transparent) ---- */ --gc-border: rgba(128,128,128,.30); /* hairlines, dividers, inputs */ --gc-muted: rgba(128,128,128,.13); /* faint fills (code, chips) */ /* ---- Theme-aware tokens (values below are the LIGHT theme) ---- */ --gc-bg: #f4f7f3; /* page / surface background */ --gc-ink: #10151a; /* primary text (and logo wordmark) */ --gc-accent: var(--gc-green-deep); /* brand accent + logo green */ --gc-green-text: #357d1f; /* readable green TEXT on a light background */ /* ---- Typography scale (sizes/weights/line-heights; theme-independent) ---- */ --gc-font-xs: 0.75rem; /* 12px — captions, helper text */ --gc-font-sm: 0.875rem; /* 14px — body2, table cells */ --gc-font-base: 1rem; /* 16px — body1, form inputs */ --gc-font-lg: 1.25rem; /* 20px — h6, card titles */ --gc-font-xl: 1.5rem; /* 24px — h5, page section titles */ --gc-font-2xl: 2rem; /* 32px — h4, page titles */ --gc-weight-regular: 400; --gc-weight-medium: 500; --gc-weight-semibold: 600; --gc-leading-tight: 1.25; --gc-leading-normal: 1.5; /* ---- Spacing scale (4px base unit; drives padding/gap/margin) ---- */ --gc-space-1: 4px; --gc-space-2: 8px; --gc-space-3: 12px; --gc-space-4: 16px; --gc-space-5: 24px; --gc-space-6: 32px; --gc-space-8: 48px; /* ---- Radius scale (matches MudTheme.LayoutProperties.DefaultBorderRadius) ---- */ --gc-radius-sm: 4px; --gc-radius-md: 8px; --gc-radius-lg: 16px; --gc-radius-pill: 999px; /* ---- Font families (fill the sizes above; theme-independent) ---- */ --gc-font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --gc-font-display: "Space Grotesk", var(--gc-font-body); /* headings, tab labels */ --gc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --gc-tracking-tight: -0.01em; /* headline/tab-label tracking */ /* ---- Console/code-panel surface (fixed dark, does NOT follow IsDarkMode — a deliberate code-viewer convention, same as VS Code/GitHub code blocks) ---- */ --gc-console-bg: #0b0f0c; --gc-console-ink: #eafbea; --gc-console-border: var(--gc-border); --gc-texture-dotgrid: radial-gradient(circle at 1px 1px, rgba(234,251,234,.08) 1px, transparent 0) 0 0/16px 16px; /* ---- JSON/code syntax colors — set once against --gc-console-bg, AA-safe by construction (replaces the old theme-independent hardcoded VS-Code-dark hex values that used to fail contrast on a light MudPaper background) ---- */ --gc-syntax-key: #9cdcfe; --gc-syntax-string: #ce9178; --gc-syntax-number: #b5cea8; --gc-syntax-bool: #569cd6; --gc-syntax-muted: rgba(234,251,234,.45); } /* Dark theme via the OS/browser setting (default on first load) */ @media (prefers-color-scheme:dark){ :root{ --gc-bg: #0b0f0c; --gc-ink: #eafbea; --gc-accent: var(--gc-green); --gc-green-text: var(--gc-green); } } /* Manual override (data-theme on ) — wins over the OS setting */ :root[data-theme="dark"]{ --gc-bg:#0b0f0c; --gc-ink:#eafbea; --gc-accent:var(--gc-green); --gc-green-text:var(--gc-green); } :root[data-theme="light"]{ --gc-bg:#f4f7f3; --gc-ink:#10151a; --gc-accent:var(--gc-green-deep); --gc-green-text:#357d1f; } /* ---- Logo (consumes the tokens; no hardcoded color) ---- */ .gc-logo{ display:block; height:48px; width:auto; aspect-ratio:4/1; color:var(--gc-ink); /* wordmark; the green reads --gc-accent */ } @media (min-width:768px){ .gc-logo{ height:64px; } } /* Split mark + wordmark pieces: neutral parts must also follow the theme. Without this, currentColor falls back to the parent's default color. */ .gc-mark, .gc-wordmark{ color:var(--gc-ink); } /* ---- Example reusable utilities (all token-driven) ---- */ .btn-brand{ background:var(--gc-accent); color:var(--gc-on-green); border:0; border-radius:10px; padding:10px 18px; font:inherit; cursor:pointer; } .btn-brand:hover{ filter:brightness(1.06); } a.brand-link{ color:var(--gc-green-text); } .badge{ border:1px solid var(--gc-green-text); color:var(--gc-green-text); border-radius:999px; padding:2px 10px; } :focus-visible{ outline:2px solid var(--gc-green-text); outline-offset:2px; } .accent-bar{ background:var(--gc-accent); height:4px; border-radius:2px; }