/* Milo Me brand tokens. Colours are derived from the logo; see docs/brand/brand-guide.html.
   Contrast (WCAG) is noted where a pair carries text. Paste into the site's token file in the site phase. */
:root {
    /* Action: deep rose from the logo's hearts/ears. Reserved for the main action (add to cart, checkout). */
    --action:        #C23B5A;   /* white text 5.16 */
    --action-strong: #A8304C;   /* hover; text on --action-soft 5.45 */
    --action-soft:   #FCE4E8;

    /* Second: the wordmark blue. Used generously: links, active tab, labels, footer. */
    --second:        #84B7E3;   /* logo blue, fills only; --ink on it 5.90 */
    --second-strong: #2E6BA3;   /* white text 5.60; as text on paper 5.47 */
    --second-ink:    #1E3A5C;   /* footer / dark panel; white text 11.57 */
    --second-soft:   #E3EEF9;

    /* Accent: lavender from the logo's rainbow ring. Badges and tags only (age range, new). */
    --accent:        #916CCB;
    --accent-strong: #6A48A8;   /* white text 6.76; text on --accent-soft 5.57 */
    --accent-soft:   #EEE6F8;

    /* Panel: butter from the stars. Soft section panels, dark text only. */
    --panel:         #FFF3D1;   /* --ink-soft on it 5.55 */
    --panel-deep:    #FAD57B;   /* --ink on it 8.89 */

    /* Ink and paper */
    --ink:           #26344A;   /* on paper 12.26 */
    --ink-soft:      #56627A;   /* on paper 5.99 */
    --ink-faint:     #8A94A6;   /* 2.99: borders, icons, dividers only, never text */
    --line:          #E8E4DA;
    --paper:         #FFFCF6;
    --surface:       #FFFFFF;

    /* Pastels from the rainbow: category tiles and illustrations, never text colours */
    --sky:    #D6E8F7;
    --blush:  #FCE1E5;
    --lilac:  #EEE6F8;
    --mint:   #DDF0D6;
    --butter: #FFF1C9;

    /* The logo's own rainbow: rainbow arcs, stickers, dots. Decoration only */
    --rb-1: #F9B4BF; --rb-2: #FAD57B; --rb-3: #B5DEA8; --rb-4: #84B7E3; --rb-5: #B9A0E0;

    /* Status, separate from brand colours */
    --success: #2F7D4F;         /* on paper 4.92 */
    --warning: #8A5A00;         /* on paper 5.79 */
    --danger:  #B3261E;         /* on paper 6.38 */

    /* Type: rounded display echoes the wordmark; both families cover Arabic + Latin */
    --font-display: "Baloo Bhaijaan 2", "Rubik", Tahoma, sans-serif;
    --font-body:    "Rubik", Tahoma, "Segoe UI", sans-serif;

    /* Shape */
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   24px;
    --r-pill: 999px;
    --shadow: 0 1px 2px rgb(38 52 74 / .06), 0 6px 16px rgb(38 52 74 / .06);
    --shadow-float: 0 16px 40px rgb(38 52 74 / .16);   /* menus, popups, dialogs: things above the page */
    --well: #EDF4FB;   /* flat sky tint for groups; white things on it are what you pick */

    /* Spacing: 4px base */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
}