/**
 * WooCommerce Campaign Manager -- shared design tokens.
 *
 * v2 (2.23.13; the file was twm-cm-tokens_v1.css). Two edits, below. v1 (2.23.7, L40 and U34). 53 tokens: the 41 shared ones (--wc-ios-*), which were
 * copied byte for byte into the head of four stylesheets (exit-intent, bxgy-progress, cart-campaign, campaign-banner), so
 * a change to one needed the same change in three others, and the 12 role tokens (--twm-cm-*: the 11 of U34 and the
 * "was" price of U55). They live here once, as
 * the stylesheet `twm-cm-tokens`, which each of the four declares as a dependency. The BXGY stylesheet that the exit-intent popup injects by URL finds
 * the tokens already on the page: the popup's own stylesheet depends on this one.
 *
 * Light palette only, by design. Flatsome ships no prefers-color-scheme rules, so a dark variant here would
 * put a dark card inside a page that stayed white. (The espresso popup is a fixed dark surface with its own
 * text colours, listed below; it is not a theme.) Add nothing here that is not read by one of the four.
 *
 * Names: the --wc-ios-* and --wc-bxgy-* tokens keep theirs (a theme or a child stylesheet may read them);
 * the new role tokens are --twm-cm-*.
 *
 * 2.23.13 (U56, U55): --wc-ios-label-3 went from white at 0.52 to 0.62, because the 12 px secondary text it colours
 * (quick view, out-of-stock, review counts and text, empty state) was 3.79:1 on the dweller card over the translucent
 * computer sheet; it is 4.63:1 there now (tests/test-tokens.php). --twm-cm-on-dark-was-price is new: the struck price on
 * the dark popup, a solid colour so that no opacity is needed. The file is renamed so that a CDN that ignores the
 * query string does not serve the old values.
 */

/* === TOKENS === */
:root {
    /* Materials — espresso preserved as brand anchor */
    --wc-ios-brand:          #2a0a04;
    --wc-ios-material-thick: rgba(42, 10, 4, 0.86);
    --wc-ios-material-reg:   rgba(42, 10, 4, 0.72);
    --wc-ios-blur:           saturate(180%) blur(30px);

    /* Semantic labels — opacity ladder, on-espresso */
    --wc-ios-label:   #ffffff;
    --wc-ios-label-2: rgba(255, 255, 255, 0.78);
    --wc-ios-label-3: rgba(255, 255, 255, 0.62);
    --wc-ios-label-4: rgba(255, 255, 255, 0.32);

    /* Fills — chips, tracks, card surfaces */
    --wc-ios-fill:   rgba(255, 255, 255, 0.10);
    --wc-ios-fill-2: rgba(255, 255, 255, 0.16);
    --wc-ios-sep:    rgba(255, 255, 255, 0.14);

    /* Light-surface set — BXGY cards, banner, cart */
    --wc-ios-bg:       #ffffff;
    --wc-ios-bg-2:     #f2f2f7;
    --wc-ios-ink:      #1c2d40;
    --wc-ios-ink-2:    rgba(28, 45, 64, 0.68);
    --wc-ios-hairline: rgba(15, 23, 42, 0.10);

    /* System colours */
    --wc-ios-blue:   #007AFF;
    --wc-ios-green:  #34C759;
    --wc-ios-red:    #FF3B30;
    --wc-ios-orange: #FF9500;

    /* U34 (2.23.7) -- the palette by role. The system colours above are bright, and a bright colour cannot be a
     * background for white text, a text colour on white and a text colour on the dark popup at once. Each
     * role below is a value that passes WCAG 2.x where it is used: 4.5:1 for text under 24 px, 3:1 for a
     * glyph. tests/test-tokens.php parses this file and checks every pair, so a value changed here that
     * breaks one fails the suite. */

    /* Fills that carry white text: the badge, the card's button, the check disc, the retry button. */
    --twm-cm-fill-green:        #1E7B34;
    --twm-cm-fill-red:          #D70015;
    --twm-cm-fill-blue:         #0062CC;
    --twm-cm-fill-orange:       #A35A00;
    --twm-cm-fill-orange-hover: #8A4B00;

    /* Text on light grounds: white, and the soft tints of the system colours (14 % / 10 %) over white. */
    --twm-cm-text-green:  #176129;
    --twm-cm-text-red:    #C20013;
    --twm-cm-text-blue:   #0055B3;
    --twm-cm-text-orange: #7A4400;

    /* Text on the dark (espresso) popup, solid and translucent (the sheet over a dimmed white page). */
    --twm-cm-on-dark-red:   #FFA39E;
    --twm-cm-on-dark-green: #9FE6B1;

    /* U55 -- the struck "was" price on the dark popup and its cards, solid. */
    --twm-cm-on-dark-was-price: #cfc2be;

    /* Continuous-corner radius scale */
    --wc-ios-r-xs: 8px;
    --wc-ios-r-sm: 10px;
    --wc-ios-r-md: 14px;
    --wc-ios-r-lg: 20px;
    --wc-ios-r-xl: 28px;
    --wc-ios-r-pill: 999px;

    /* SF-derived type scale */
    --wc-ios-t-title1:   1.75rem;
    --wc-ios-t-title3:   1.25rem;
    --wc-ios-t-headline: 1.0625rem;
    --wc-ios-t-callout:  1rem;
    --wc-ios-t-subhead:  0.9375rem;
    --wc-ios-t-footnote: 0.8125rem;
    --wc-ios-t-caption:  0.75rem;

    /* Motion — the iOS sheet curve */
    --wc-ios-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --wc-ios-ease-std:   cubic-bezier(0.25, 0.1, 0.25, 1);
    --wc-ios-dur-sheet:  0.45s;
    --wc-ios-dur-fast:   0.2s;

    /* Elevation + safe area */
    --wc-ios-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.34);
    --wc-ios-shadow-card:  0 8px 24px rgba(15, 23, 42, 0.08);
    --wc-ios-safe-b:       env(safe-area-inset-bottom, 0px);

    --wc-ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}