/* SUMMIT palette: the only colours used on SUMMIT-branded surfaces (decks, lab pages, diagrams, the agent UI). * Six flat colours, no gradients. The only derived values are the alpha helpers and the two surface tints below. * Rules (see README.md): peaks are Bark on light and Canvas on dark, never a stripe colour; * Mustard and Tangerine are never body-text colours on a light ground (contrast too low); * one sun per surface. * * Usage: then color: var(--summit-fg); background: var(--summit-bg); * Dark: add data-theme="dark" on (or class="summit-dark" on any container), or let prefers-color-scheme decide. * Light: data-theme="light" pins the light palette even when the OS is dark. */ :root { /* raw palette */ --summit-bark: #2A211C; /* text, peaks on light; ground on dark */ --summit-canvas: #F1E9D8; /* ground on light; text, peaks on dark */ --summit-mustard: #E3A62B; /* top sun zone, first horizon band, highlight on dark */ --summit-tangerine: #E2702C; /* middle sun zone, second band */ --summit-rust: #B5412A; /* low sun zone, third band, accent text on light */ --summit-dusk: #8A6A55; /* secondary text, rules, captions */ /* type */ --summit-font-display: Futura, "Trebuchet MS", "Century Gothic", sans-serif; /* caps only, tracked */ --summit-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --summit-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --summit-tracking-display: 0.16em; /* Futura caps tracked +160 */ --summit-tracking-label: 0.08em; /* small caps labels, footers */ /* semantic tokens, light (default) */ --summit-bg: var(--summit-canvas); --summit-fg: var(--summit-bark); --summit-muted: var(--summit-dusk); --summit-peak: var(--summit-bark); --summit-accent: var(--summit-rust); /* links, emphasis, tagline */ --summit-highlight: var(--summit-tangerine); /* callout borders, active step */ --summit-sun: var(--summit-mustard); --summit-surface: #FBF7EE; /* cards and code blocks lifted off Canvas */ --summit-rule: rgba(138, 106, 85, 0.35); /* Dusk at 35% */ --summit-code-bg: rgba(42, 33, 28, 0.06); /* Bark at 6% */ --summit-focus: var(--summit-tangerine); } /* Dark, when the OS asks for it and nobody pinned light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --summit-bg: var(--summit-bark); --summit-fg: var(--summit-canvas); --summit-muted: rgba(241, 233, 216, 0.72); /* Canvas at 72%; Dusk is too dim on Bark for text */ --summit-peak: var(--summit-canvas); --summit-accent: var(--summit-mustard); --summit-highlight: var(--summit-tangerine); --summit-sun: var(--summit-mustard); --summit-surface: #362B25; --summit-rule: rgba(241, 233, 216, 0.22); --summit-code-bg: rgba(241, 233, 216, 0.08); --summit-focus: var(--summit-mustard); } } /* Dark, pinned explicitly. Same values as above so the toggle wins in both directions. */ :root[data-theme="dark"], .summit-dark { --summit-bg: var(--summit-bark); --summit-fg: var(--summit-canvas); --summit-muted: rgba(241, 233, 216, 0.72); --summit-peak: var(--summit-canvas); --summit-accent: var(--summit-mustard); --summit-highlight: var(--summit-tangerine); --summit-sun: var(--summit-mustard); --summit-surface: #362B25; --summit-rule: rgba(241, 233, 216, 0.22); --summit-code-bg: rgba(241, 233, 216, 0.08); --summit-focus: var(--summit-mustard); } /* Helpers. Optional; nothing above depends on them. */ .summit-ground { background: var(--summit-bg); color: var(--summit-fg); font-family: var(--summit-font-body); } /* The wordmark treatment for live text: SUMMIT in caps, tracked. */ .summit-caps { font-family: var(--summit-font-display); text-transform: uppercase; letter-spacing: var(--summit-tracking-display); font-weight: 500; } /* Small tracked label: slide footers, eyebrow headings, table captions. */ .summit-label { font-family: var(--summit-font-display); text-transform: uppercase; letter-spacing: var(--summit-tracking-label); font-size: 0.75rem; color: var(--summit-muted); } /* Three-band horizon rule, drawn in CSS so slides do not need an image for it. 15px tall. */ .summit-bands { height: 15px; background: linear-gradient(to bottom, var(--summit-mustard) 0 3px, transparent 3px 6px, var(--summit-tangerine) 6px 9px, transparent 9px 12px, var(--summit-rust) 12px 15px); } /* Deck footer bar: label left, counter right, thin rule above. See slide-footer.md. */ .summit-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--summit-rule); font-family: var(--summit-font-display); letter-spacing: var(--summit-tracking-label); font-size: 0.75rem; color: var(--summit-muted); } .summit-footer strong { color: var(--summit-fg); font-weight: 500; letter-spacing: var(--summit-tracking-display); } a.summit-link, .summit-ground a { color: var(--summit-accent); } .summit-ground :focus-visible { outline: 2px solid var(--summit-focus); outline-offset: 2px; }