/* Stanford tones for the public pages (owner, 2026-10-17: "not just red ...
   green, brown, using Stanford colors and black as well and white when
   appropriate to highlight things").

   Sprout's red (#922821, layout.css .otf-public-home) stays the base and the
   hero. A section can take one of four other tones by class, and each tone
   re-declares the same public tokens, so everything inside it (headings,
   cards, chips, the live board, the cream button) follows without a rule of
   its own:

     otf-tone-green   Palo Alto (#175E54): what is live, transit, campus
     otf-tone-brown   Archway (#5D4B3C): places, the map, questions
     otf-tone-black   Stanford black (#2E2D29): phones, data, the footer
     otf-tone-light   ivory paper with Stanford black ink: the one highlight
                      band a page gets, with Cardinal red for its action

   Every text role clears WCAG AA on each tone's canvas and surfaces (checked
   2026-10-17: the lowest pair is 4.8:1, amber on raised green, and amber is
   never body text). A band spans the window, and its edges are straight. */

/* A band is the window's full width, its content kept in the 1440px column
   by its padding. Its colour is flat and its edges are straight, with a
   hairline where it starts and where the red page takes over again (owner,
   2026-10-17: "remove the blends and just use straight lines/outlines"; the
   bands had faded into each other). */
.otf-public-home :is(.otf-tone-green, .otf-tone-brown, .otf-tone-black, .otf-tone-light) {
    position: relative;
    border-top: 1px solid var(--otf-public-line);
    border-bottom: 0;
    color: var(--otf-public-ivory);
    background: var(--otf-public-canvas);
}

.otf-public-home :is(.otf-tone-green, .otf-tone-brown, .otf-tone-black, .otf-tone-light) + :not([class*="otf-tone-"]) {
    border-top: 1px solid var(--otf-public-line);
}

.otf-public-home :is(.otf-tour, .otf-story, .otf-fan, .otf-walkthrough, .otf-demo, .otf-press-timeline,
    .otf-public-features, .otf-fp-block, .otf-live, .otf-public-safety, .otf-public-split, .otf-public-stats,
    .public-home-faq, .otf-sources-week, .otf-sources-kind, .otf-live-device):is(.otf-tone-green, .otf-tone-brown, .otf-tone-black, .otf-tone-light) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--otf-inset, 16px), calc((100% - var(--otf-canvas-max, 1440px)) / 2 + var(--otf-inset, 16px)));
}

/* The bands that draw glows of their own keep them, on their flat colour. */
.otf-public-home .otf-island.otf-tone-green {
    background:
        radial-gradient(90% 60% at 50% 18%, rgba(255, 240, 214, 0.12), transparent 70%),
        radial-gradient(60% 50% at 80% 90%, rgba(4, 30, 25, 0.5), transparent 70%),
        var(--otf-public-canvas);
}

.otf-public-home .otf-public-safety:is(.otf-tone-green, .otf-tone-brown, .otf-tone-black) {
    background:
        radial-gradient(36% 130% at 26% 50%, rgba(255, 240, 214, 0.1), transparent 70%),
        var(--otf-public-canvas);
}

.otf-public-home .otf-tone-green {
    --otf-public-canvas: #175e54;
    --otf-public-canvas-deep: #0c3a33;
    --otf-public-raised: #1f6d62;
    --otf-public-surface: #124c44;
    --otf-public-surface-strong: #0e3f38;
    --otf-public-muted: #d4ece3;
    --otf-public-sand: #f1e2b4;
    --otf-public-amber: #fcd38f;
    --otf-public-live: #b9f3cc;
    --otf-public-red: #0e3f38;
    --otf-public-line: rgba(220, 255, 240, 0.2);
    --otf-public-shadow: rgba(4, 30, 25, 0.45);
}

.otf-public-home .otf-tone-brown {
    --otf-public-canvas: #5d4b3c;
    --otf-public-canvas-deep: #3a2e25;
    --otf-public-raised: #6b5746;
    --otf-public-surface: #4e3e31;
    --otf-public-surface-strong: #42352a;
    --otf-public-muted: #efdecd;
    --otf-public-sand: #f3d9a6;
    --otf-public-amber: #fcd38f;
    --otf-public-live: #a9ecc0;
    --otf-public-red: #42352a;
    --otf-public-line: rgba(255, 240, 222, 0.2);
    --otf-public-shadow: rgba(30, 20, 12, 0.45);
}

.otf-public-home .otf-tone-black {
    --otf-public-canvas: #2e2d29;
    --otf-public-canvas-deep: #1c1b19;
    --otf-public-raised: #3a3934;
    --otf-public-surface: #383732;
    --otf-public-surface-strong: #44433d;
    --otf-public-muted: #ddd6cb;
    --otf-public-sand: #e9d8a6;
    --otf-public-amber: #fcc687;
    --otf-public-live: #94e7b1;
    --otf-public-red: #8c1515;
    --otf-public-line: rgba(255, 250, 240, 0.16);
    --otf-public-shadow: rgba(0, 0, 0, 0.5);
}

/* Ivory paper: the tokens' "ivory" is the primary text role, so here it is
   Stanford black, and the action turns Cardinal red with cream text. */
.otf-public-home .otf-tone-light {
    --otf-public-canvas: #f7f1e6;
    --otf-public-canvas-deep: #ece3d3;
    --otf-public-raised: #ffffff;
    --otf-public-surface: #ffffff;
    --otf-public-surface-strong: #efe6d6;
    --otf-public-ivory: #2e2d29;
    --otf-public-muted: #5b5249;
    --otf-public-sand: #8c1515;
    --otf-public-amber: #8a4f00;
    --otf-public-live: #175e54;
    --otf-public-red: #8c1515;
    --otf-public-green: #175e54;
    --otf-public-line: rgba(46, 45, 41, 0.14);
    --otf-public-action: #8c1515;
    --otf-public-action-hover: #b1040e;
    --otf-public-action-ink: #fffaf0;
    --otf-public-shadow: rgba(46, 45, 41, 0.16);
}

/* The few public rules that write cream text as a literal, re-pointed at the
   text roles on ivory paper. */
.otf-public-home .otf-tone-light :is(
    .otf-public-section-head > p:last-child,
    .otf-public-split p,
    .otf-fp-lede,
    .otf-live-empty
) {
    color: var(--otf-public-muted);
}

.otf-public-home .otf-tone-light :is(.otf-public-feature, .otf-live-card, .otf-fp-card, .otf-public-stat) {
    box-shadow: 0 1px 0 rgba(46, 45, 41, 0.04), 0 14px 34px -18px var(--otf-public-shadow);
}

.otf-public-home .otf-tone-light .otf-public-eyebrow > span {
    background: var(--otf-public-live);
    box-shadow: 0 0 0 4px rgba(23, 94, 84, 0.16);
}

.otf-public-home .otf-tone-light :is(.otf-explore-chip, .otf-live-refresh, .otf-fp-more-link, .otf-fp-links a, .otf-fp-chips li) {
    color: var(--otf-public-ivory);
    background: rgba(46, 45, 41, 0.04);
}

.otf-public-home .otf-tone-light .otf-explore-chip[aria-pressed="true"] {
    color: #fffaf0;
    background: #2e2d29;
    border-color: #2e2d29;
}

.otf-public-home .otf-tone-light :is(.otf-public-button.secondary, .otf-glass-button:not(.primary)) {
    color: var(--otf-public-ivory);
    background: rgba(46, 45, 41, 0.06);
    border-color: rgba(46, 45, 41, 0.18);
}

@media (prefers-contrast: more) {
    .otf-public-home :is(.otf-tone-green, .otf-tone-brown, .otf-tone-black) {
        --otf-public-muted: #fff4ea;
        --otf-public-line: rgba(255, 250, 240, 0.4);
    }
    .otf-public-home .otf-tone-light {
        --otf-public-muted: #2e2d29;
        --otf-public-line: rgba(46, 45, 41, 0.4);
    }
}