:root {
    --brand-lime: #c9f24a;
    --brand-lime-strong: #bce23f;
    --brand-lime-ink: #7f9600;
    --brand-lime-tint: #eef7cf;
    --brand-lime-surface: #f2f7df;

    --brand-ink: #17170f;
    --brand-ink-line: #2f2e21;
    --brand-paper: #f4f3ee;
    --brand-rail: #ffffff;
    --brand-canvas: #e9e6dd;
    --brand-line: #e0ddd3;
    --brand-line-soft: #e9e5db;

    --brand-danger: #b0322f;
    --brand-danger-surface: #fdf3f2;
    --brand-danger-line: #ecc9c8;
    /* The danger ink readable on --brand-ink, where --brand-danger is not. */
    --brand-danger-on-ink: #e58a88;

    /* The decorative traffic lights on the editor's canvas frame and on the two
       fake browser windows the marketing site draws. */
    --brand-dot-red: #ff5f57;
    --brand-dot-yellow: #febc2e;
    --brand-dot-green: #28c840;

    --brand-font-display: 'Fraunces', Georgia, serif;
    --brand-font-sans: 'Inter', system-ui, sans-serif;
    --brand-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}