/* open-campus-graphics v1.0.0. Copied into this project from the skill; don't edit here, update the skill. */
/* Open Campus graphics tokens
Drop this into any graphic, tool or news app. Everything else is up to the project.
Load fonts first:
*/
:root {
/* ---- Brand ---- */
--oc-blue: #1d4391; /* anchor. Text-safe on off-white (8.5:1) */
--oc-offwhite: #fcf3ec; /* default page background */
--oc-orange: #ff825f; /* spotlight. FILL ONLY (2.2:1); use --oc-orange-600 for text */
/* Extended brand colors: kept, but with defined jobs (see visual-system.md) */
--oc-sky: #a0daf2; /* light blue: blue's light partner in extended charts. FILL ONLY (1.4:1) */
--oc-yellow: #ffdc69; /* callouts and annotation highlights, not data. FILL ONLY (1.2:1) */
--oc-green: #c0c879; /* illustration and backgrounds, not data. FILL ONLY (1.6:1) */
/* ---- Added: ink + data-safe extras ---- */
--oc-ink: #132548; /* body text: navy-black drawn from the brand blue (13.8:1) */
--oc-teal: #138282; /* 3rd core data color; stays distinct under color blindness (4.2:1) */
--oc-olive: #72772a; /* extended data color, from green's hue (4.4:1) */
--oc-orange-light: #fec5b2; /* orange's light partner in extended charts. FILL ONLY */
--oc-white: #ffffff; /* cards, tooltips, embeds on white host pages */
/* ---- Warm greys, built to sit on off-white ----
Contrast vs off-white in comments. Text needs 4.5+, chart marks and lines need 3+. */
--oc-grey-50: #f2f0ed; /* 1.0 table zebra, subtle panels */
--oc-grey-100: #ebe9e7; /* 1.1 panel backgrounds */
--oc-grey-200: #dddad7; /* 1.3 gridlines, dividers */
--oc-grey-300: #c6c3c1; /* 1.6 "all others" marks when there are many */
--oc-grey-400: #a7a4a1; /* 2.3 context marks, disabled UI */
--oc-grey-500: #898582; /* 3.3 axis lines, de-emphasized marks (meets 3:1) */
--oc-grey-600: #6f6b68; /* 4.8 faintest text allowed: source lines, notes, axis labels */
--oc-grey-700: #55524f; /* 7.1 secondary text */
--oc-grey-800: #3e3a36; /* 10.3 */
--oc-grey-900: #292622; /* 13.8 */
/* ---- Blue ramp (default sequential) ---- */
--oc-blue-100: #e2ecfd;
--oc-blue-200: #bfd2f3;
--oc-blue-300: #95b2e5;
--oc-blue-400: #6a8fd2;
--oc-blue-500: #436cb9; /* 4.7, text-safe */
--oc-blue-600: #1d4391; /* = brand blue */
--oc-blue-700: #0b2964;
/* ---- Orange ramp ---- */
--oc-orange-100: #fee5dc;
--oc-orange-200: #fec5b2;
--oc-orange-300: #ffa383;
--oc-orange-400: #ff825f; /* = brand orange */
--oc-orange-500: #da6438; /* 3.3, ok for marks and lines */
--oc-orange-600: #b04c26; /* 4.9, text-safe orange for highlighted labels */
--oc-orange-700: #83391e;
/* ---- Diverging: orange (below) <-> neutral <-> blue (above) ---- */
--oc-div-1: #812f13;
--oc-div-2: #bb4d2a;
--oc-div-3: #eb7955;
--oc-div-4: #f9b9a5;
--oc-div-5: #f2ede9; /* midpoint */
--oc-div-6: #b9cbec;
--oc-div-7: #809fd7;
--oc-div-8: #4c73ba;
--oc-div-9: #1d4391;
/* ---- Roles (prefer these names in project CSS) ---- */
--oc-bg: var(--oc-offwhite);
--oc-surface: var(--oc-white);
--oc-text: var(--oc-ink);
--oc-text-muted: var(--oc-grey-700);
--oc-text-faint: var(--oc-grey-600);
--oc-rule: var(--oc-grey-200);
--oc-axis: var(--oc-grey-500);
--oc-link: var(--oc-blue-600);
--oc-focus-ring: var(--oc-orange-500); /* keyboard focus outline */
/* Data roles: focus (what the story is about), benchmark (what it's compared to), context (the rest) */
--oc-data-focus: var(--oc-orange);
--oc-data-focus-text: var(--oc-orange-600);
--oc-data-benchmark: var(--oc-blue);
--oc-data-context: var(--oc-grey-400);
/* ---- Type ---- */
--oc-font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--oc-font-ui: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
--oc-font-body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
--oc-size-hed: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); /* graphic or app headline */
--oc-size-chart: 1.25rem; /* chart title inside a larger piece */
--oc-size-dek: 1.125rem; /* top matter */
--oc-size-body: 1.0625rem;
--oc-size-label: 0.875rem; /* axis and data labels, table cells */
--oc-size-note: 0.8125rem; /* source line, notes. Never smaller. */
--oc-size-number: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); /* one big stat */
--oc-measure: 38rem; /* max width for prose */
--oc-radius: 4px;
--oc-space: 1rem;
}
/* Opt-in base styles: add class="oc" to the graphic's wrapper. */
.oc { background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font-body); font-size: var(--oc-size-body); line-height: 1.6; }
.oc h1, .oc h2, .oc h3, .oc .oc-hed { font-family: var(--oc-font-display); font-weight: 600; line-height: 1.15; color: var(--oc-blue); letter-spacing: -0.01em; text-wrap: balance; }
.oc .oc-dek { font-size: var(--oc-size-dek); max-width: var(--oc-measure); }
.oc .oc-byline { font-family: var(--oc-font-ui); font-size: var(--oc-size-label); color: var(--oc-text-muted); }
.oc .oc-source { font-family: var(--oc-font-ui); font-size: var(--oc-size-note); color: var(--oc-text-faint); line-height: 1.45; }
.oc svg text, .oc table, .oc .oc-ui { font-family: var(--oc-font-ui); font-variant-numeric: tabular-nums; }
.oc td.num, .oc th.num { text-align: right; }
.oc a { color: var(--oc-link); text-underline-offset: 0.15em; }
.oc :focus-visible { outline: 3px solid var(--oc-focus-ring); outline-offset: 2px; }
.oc.oc-embed { background: transparent; } /* inside a partner's page */
@media (prefers-reduced-motion: reduce) { .oc * { transition: none !important; animation: none !important; } }