/*
 * Bold theme: the A/B variant of SnappySave. A starting point for the design
 * team; same token set as themes/snappy/theme.css.
 *
 * Colours are space-separated RGB channels so Tailwind can apply opacity
 * (bg-brand-accent/50). Images go in rules here, not in custom properties:
 * only then do url() paths resolve relative to this file, so a theme folder
 * carries its own images.
 */
:root {
    --brand-primary: 255 107 74;
    --brand-ink: 20 20 35;
    --brand-muted: 100 116 139;
    --brand-olive: 154 52 18;
    --brand-background: 250 248 246;
    --brand-low: 245 241 238;
    --brand-container: 238 233 229;
    --brand-high: 230 224 219;

    --brand-page: 255 140 105;
    --brand-card: 255 247 243;
    --brand-accent: 13 148 136;
    --brand-accent-strong: 15 118 110;

    /*
     * The app's two scales. Neutral is text, borders, and surfaces (light and
     * dark mode); action is links, buttons, and focus rings.
     */
    --brand-neutral-50: 248 250 252;
    --brand-neutral-100: 241 245 249;
    --brand-neutral-200: 226 232 240;
    --brand-neutral-300: 203 213 225;
    --brand-neutral-400: 148 163 184;
    --brand-neutral-500: 100 116 139;
    --brand-neutral-600: 71 85 105;
    --brand-neutral-700: 51 65 85;
    --brand-neutral-800: 30 41 59;
    --brand-neutral-900: 15 23 42;
    --brand-neutral-950: 2 6 23;

    --brand-action-50: 240 253 250;
    --brand-action-100: 204 251 241;
    --brand-action-200: 153 246 228;
    --brand-action-300: 94 234 212;
    --brand-action-400: 45 212 191;
    --brand-action-500: 20 184 166;
    --brand-action-600: 13 148 136;
    --brand-action-700: 15 118 110;
    --brand-action-800: 17 94 89;
    --brand-action-900: 19 78 74;
    --brand-action-950: 4 47 46;

    --brand-font-display: 'Outfit';
    --brand-font-body: 'Figtree';
}

/* The full-bleed background of the public campaign pages. */
.brand-page {
    background-image: url('background.svg');
    background-size: 160px 160px;
}

/*
 * The pattern over the brand colour on app pages (sign-in, store and image
 * pages, for-businesses). Soft is the faint version behind the share pages.
 */
.brand-backdrop {
    background-image: radial-gradient(rgb(255 255 255 / 0.55) 3px, transparent 3px);
    background-size: 28px 28px;
}

.brand-backdrop-soft {
    background-image: radial-gradient(rgb(255 255 255 / 0.25) 3px, transparent 3px);
    background-size: 28px 28px;
}