/* =============================================================
   Worldpay Design System — token layer for StoreCardUI
   -------------------------------------------------------------
   Hand-ported from the Worldpay Design System style guide
   (collection: Palette). The official tokens ship via the
   @wp-webcomponent/design-tokens NPM package, which targets
   Angular/React; this MVC app consumes the equivalent CSS
   custom properties directly.

   Default theme: Worldpay (legacy navy #1b1b6f).
   Switch to the Global Payments theme by adding the
   .theme-global-payments class to <html> or <body>.
   Switch to dark mode by setting data-theme="dark" on <html>.
   ============================================================= */

:root {
    /* -------- Brand: Worldpay (default) -------- */
    --color-brand-primary:           #1b1b6f;
    --color-brand-primary-focus:     #4b4bd3;
    --color-brand-primary-highlight: #eaeafa;
    --color-brand-primary-subtle:    #f5f5fd;
    --color-container-brand:         #f5f5fd;
    --color-container-brand-inverse: #1b1b6f;

    /* -------- Content (text + icons) -------- */
    --color-content-primary:         #17171c;
    --color-content-secondary:       #6a6e87;
    --color-content-tertiary:        #8d91aa;
    --color-content-primary-inverse: #ffffff;

    /* -------- Border -------- */
    --color-border-primary:    #17171c;
    --color-border-secondary:  #8d91aa;
    --color-border-tertiary:   #cccfd7;
    --color-border-quarternary:#e2e4e9;
    --color-border-quinary:    #f4f4f6;
    --color-border-primary-inverse: #ffffff;

    /* -------- Background / surface -------- */
    --color-background-primary:   #ffffff;
    --color-background-secondary: #f7f7f8;

    /* -------- Signal: success -------- */
    --color-signal-success-content: #116a48;
    --color-signal-success-graphic: #199f6b;
    --color-signal-success-focus:   #a2f1d3;
    --color-signal-success-subtle:  #e9fcf4;

    /* -------- Signal: warning -------- */
    --color-signal-warning-content: #b05902;
    --color-signal-warning-graphic: #de7402;
    --color-signal-warning-focus:   #ffe099;
    --color-signal-warning-subtle:  #fffaeb;

    /* -------- Signal: error -------- */
    --color-signal-error-content: #dd1308;
    --color-signal-error-graphic: #f72c22;
    --color-signal-error-focus:   #fdc2bf;
    --color-signal-error-subtle:  #fef1f0;

    /* -------- Typography -------- */
    /* Real fonts (Inter / Blinker / Chivo Mono) are loaded via the
       Google Fonts <link> in each shared layout. To self-host
       instead, drop the .ttf files into Content/fonts/ and
       uncomment the @font-face block at the bottom of this file. */
    --font-family-base:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-display: "Blinker", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-mono:    "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* -------- Spacing scale (subset) -------- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* -------- Radius -------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* =============================================================
       Typography scale (per Worldpay Design System)
       Format: <weight> <size>/<line-height> <family>
       Where the guide gives a desktop / mobile pair the desktop
       value is used for the token; mobile via a media query below.
       ============================================================= */

    /* Display — Blinker 600 (marketing) */
    --display-lg: 600 72px/84px var(--font-family-display);
    --display-md: 600 60px/72px var(--font-family-display);
    --display-sm: 600 48px/56px var(--font-family-display);

    /* Heading — Inter 600 */
    --heading-lg: 600 40px/48px var(--font-family-base);
    --heading-md: 600 32px/40px var(--font-family-base);
    --heading-sm: 600 24px/32px var(--font-family-base);

    /* Title — Inter 500 */
    --title-lg: 500 20px/24px var(--font-family-base);
    --title-md: 500 18px/24px var(--font-family-base);
    --title-sm: 500 15px/20px var(--font-family-base);
    --title-xs: 500 14px/20px var(--font-family-base);

    /* Numeric — Inter 600 */
    --numeric-lg: 600 40px/56px var(--font-family-base);
    --numeric-md: 600 32px/40px var(--font-family-base);

    /* Body — Inter, 4 weights per size */
    --body-lg-regular:     400 18px/28px var(--font-family-base);
    --body-lg-italic:      italic 400 18px/28px var(--font-family-base);
    --body-lg-bold:        700 18px/28px var(--font-family-base);
    --body-lg-bold-italic: italic 700 18px/28px var(--font-family-base);

    --body-md-regular:     400 15px/24px var(--font-family-base);
    --body-md-italic:      italic 400 15px/24px var(--font-family-base);
    --body-md-bold:        700 15px/24px var(--font-family-base);
    --body-md-bold-italic: italic 700 15px/24px var(--font-family-base);

    --body-sm-regular:     400 14px/20px var(--font-family-base);
    --body-sm-italic:      italic 400 14px/20px var(--font-family-base);
    --body-sm-bold:        700 14px/20px var(--font-family-base);
    --body-sm-bold-italic: italic 700 14px/20px var(--font-family-base);

    --body-xs-regular:     400 12px/20px var(--font-family-base);
    --body-xs-italic:      italic 400 12px/20px var(--font-family-base);
    --body-xs-bold:        700 12px/20px var(--font-family-base);
    --body-xs-bold-italic: italic 700 12px/20px var(--font-family-base);

    /* Button — Inter 600 */
    --button-md: 600 15px/20px var(--font-family-base);
    --button-sm: 600 14px/20px var(--font-family-base);

    /* Link — Inter, 4 weights per size (underline applied at usage site) */
    --link-lg-regular:     400 18px/28px var(--font-family-base);
    --link-lg-italic:      italic 400 18px/28px var(--font-family-base);
    --link-lg-bold:        700 18px/28px var(--font-family-base);
    --link-lg-bold-italic: italic 700 18px/28px var(--font-family-base);

    --link-md-regular:     400 15px/24px var(--font-family-base);
    --link-md-italic:      italic 400 15px/24px var(--font-family-base);
    --link-md-bold:        700 15px/24px var(--font-family-base);
    --link-md-bold-italic: italic 700 15px/24px var(--font-family-base);

    --link-sm-regular:     400 14px/20px var(--font-family-base);
    --link-sm-italic:      italic 400 14px/20px var(--font-family-base);
    --link-sm-bold:        700 14px/20px var(--font-family-base);
    --link-sm-bold-italic: italic 700 14px/20px var(--font-family-base);

    --link-xs-regular:     400 12px/20px var(--font-family-base);
    --link-xs-italic:      italic 400 12px/20px var(--font-family-base);
    --link-xs-bold:        700 12px/20px var(--font-family-base);
    --link-xs-bold-italic: italic 700 12px/20px var(--font-family-base);

    /* Monospace — Chivo Mono 400 */
    --monospace-sm: 400 14px/20px var(--font-family-mono);

    /* Letter spacing */
    --letter-spacing-tracking-tightest: -0.8px;
    --letter-spacing-tracking-tighter:  -0.4px;
    --letter-spacing-tracking-tight:    -0.2px;
    --letter-spacing-tracking-normal:    0;
    --letter-spacing-tracking-wide:      0.2px;
    --letter-spacing-tracking-wider:     0.4px;
    --letter-spacing-tracking-widest:    0.8px;

    /* Paragraph spacing */
    --paragraph-spacing-50:    4px;
    --paragraph-spacing-100:  12px;
    --paragraph-spacing-200:  16px;
    --paragraph-spacing-300:  20px;
    --paragraph-spacing-400:  24px;
    --paragraph-spacing-500:  28px;
    --paragraph-spacing-600:  32px;
    --paragraph-spacing-700:  40px;
    --paragraph-spacing-800:  48px;
    --paragraph-spacing-900:  56px;
    --paragraph-spacing-1000: 60px;
    --paragraph-spacing-1100: 72px;
    --paragraph-spacing-1200: 88px;

    /* =============================================================
       Layout
       ============================================================= */

    /* Grid spacers (4px-base scale) */
    --grid-spacer-4:   4px;
    --grid-spacer-8:   8px;
    --grid-spacer-12: 12px;
    --grid-spacer-16: 16px;
    --grid-spacer-20: 20px;
    --grid-spacer-24: 24px;
    --grid-spacer-32: 32px;
    --grid-spacer-40: 40px;
    --grid-spacer-48: 48px;
    --grid-spacer-56: 56px;

    /* Component heights */
    --component-height-xxs: 24px;
    --component-height-xs:  32px;
    --component-height-sm:  40px;
    --component-height-md:  48px;
    --component-height-lg:  56px;

    /* Width tokens */
    --width-sidebar:           284px;
    --width-paragraph-max:     720px;
    --width-landing-max:      1440px;
    --width-dashboard-max:    1636px;
    --width-screen-phone:      360px;
    --width-screen-tablet:     768px;
    --width-screen-desktop-md: 1440px;
    --width-screen-desktop-lg: 1920px;
    --width-modal-phone:       360px;
    --width-modal-tablet-xl:   736px;
    --width-modal-desktop-s:   400px;
    --width-modal-desktop-m:   544px;
    --width-modal-desktop-l:   720px;
    --width-modal-desktop-xl:  960px;
    --width-drawer-phone:      360px;
    --width-drawer-desktop-s:  400px;
    --width-drawer-desktop-l:  768px;

    /* Height tokens */
    --height-screen-phone:      800px;
    --height-screen-tablet:    1024px;
    --height-screen-desktop-md: 1024px;
    --height-screen-desktop-lg: 1080px;

    /* =============================================================
       Surface — corner radius
       ============================================================= */
    --border-radius-none: 0;
    --border-radius-xxs:  2px;
    --border-radius-xs:   4px;
    --border-radius-sm:   6px;
    --border-radius-md:   8px;
    --border-radius-lg:  12px;
    --border-radius-xl:  16px;
    --border-radius-2xl: 20px;
    --border-radius-3xl: 24px;
    --border-radius-full: 9999px;

    /* =============================================================
       Surface — elevation (shadows + focus rings)
       Light-mode rgba values from the WP guide.
       ============================================================= */
    --shadow-l1: 0 1px 2px 0 rgba(27, 27, 111, 0.04);
    --shadow-l2: 0 4px 8px 0 rgba(27, 27, 111, 0.08), 0 0 1px 0 rgba(27, 27, 111, 0.04);
    --shadow-l3: 0 0 10px 0 rgba(27, 27, 111, 0.05), 0 0 6px 0 rgba(27, 27, 111, 0.05), 0 0 6px 0 rgba(27, 27, 111, 0.05);
    --shadow-l4: 0 15px 30px 0 rgba(27, 27, 111, 0.10), 0 5px 10px 0 rgba(27, 27, 111, 0.05), 0 2px 4px 0 rgba(27, 27, 111, 0.05);
    --shadow-l5: 0 15px 30px 0 rgba(27, 27, 111, 0.10), 0 10px 20px 0 rgba(27, 27, 111, 0.05), 0 3px 6px 0 rgba(27, 27, 111, 0.05);

    /* Focus rings: outer brand ring + inner white separator (per guide) */
    --focus-ring-subtle: 0 0 0 2px #ffffff, 0 0 0 4px #4b4bd3;
    --focus-ring-strong: 0 0 0 2px #ffffff, 0 0 0 6px #4b4bd3;

    /* =============================================================
       Container palette extensions
       ============================================================= */
    --color-container-primary:   #ffffff;
    --color-container-secondary: #f7f7f8;
    --color-container-tertiary:  #f4f4f6;

    /* =============================================================
       Overlay / scrim palette
       ============================================================= */
    --color-overlay-dark:    rgba(23, 23, 28, 0.50);
    --color-overlay-darker:  rgba(23, 23, 28, 0.70);
    --color-overlay-darkest: rgba(23, 23, 28, 0.85);
    --color-overlay-light:   rgba(255, 255, 255, 0.50);
    --color-overlay-lighter: rgba(255, 255, 255, 0.70);
    --color-overlay-lightest:rgba(255, 255, 255, 0.85);

    /* =============================================================
       Absolute palette (do not invert in dark mode)
       ============================================================= */
    --color-absolute-worldpay: #1b1b6f;
    --color-absolute-white:    #ffffff;
    --color-absolute-black:    #000000;

    /* =============================================================
       Data palette (charts, categorical data)
       ============================================================= */
    --color-data-yellow: #f5a70a;
    --color-data-orange: #de7402;
    --color-data-coral:  #f72c22;
    --color-data-cyan:   #06b6d4;
    --color-data-blue:   #262aff;
    --color-data-indigo: #4b4bd3;
    --color-data-violet: #7c3aed;
    --color-data-purple: #a855f7;
}

/* =============================================================
   Global Payments theme (electric blue)
   Add .theme-global-payments to <html> or <body> to apply.
   ============================================================= */
.theme-global-payments {
    --color-brand-primary:           #262aff;
    --color-brand-primary-focus:     #7978ff;
    --color-brand-primary-highlight: #f0efff;
    --color-brand-primary-subtle:    #f8f8ff;
    --color-container-brand:         #f8f8ff;
    --color-container-brand-inverse: #262aff;
}

/* =============================================================
   Dark mode
   Add data-theme="dark" to <html> to apply.
   ============================================================= */
[data-theme="dark"] {
    /* Worldpay brand in dark */
    --color-brand-primary:           #a8a6f2;
    --color-brand-primary-focus:     #6662cb;
    --color-brand-primary-highlight: #302e56;
    --color-brand-primary-subtle:    #21203c;
    --color-container-brand:         #21203c;
    --color-container-brand-inverse: #a8a6f2;

    --color-content-primary:         #ffffff;
    --color-content-secondary:       #9091a3;
    --color-content-tertiary:        #71727a;
    --color-content-primary-inverse: #17171c;

    --color-border-primary:    #ffffff;
    --color-border-secondary:  #71727a;
    --color-border-tertiary:   #424348;
    --color-border-quarternary:#2a2a2d;
    --color-border-quinary:    #202022;
    --color-border-primary-inverse: #17171c;

    --color-background-primary:   #13131d;
    --color-background-secondary: #1b1b27;

    --color-signal-success-content: #47cc9c;
    --color-signal-success-graphic: #29946d;
    --color-signal-success-focus:   #0c5037;
    --color-signal-success-subtle:  #032619;

    --color-signal-warning-content: #f5a70a;
    --color-signal-warning-graphic: #c27e0a;
    --color-signal-warning-focus:   #6c3d13;
    --color-signal-warning-subtle:  #392013;

    --color-signal-error-content: #e96963;
    --color-signal-error-graphic: #de423b;
    --color-signal-error-focus:   #780d08;
    --color-signal-error-subtle:  #420805;

    /* Container palette in dark */
    --color-container-primary:   #13131d;
    --color-container-secondary: #1b1b27;
    --color-container-tertiary:  #202022;

    /* Shadows in dark mode use a slightly deeper navy base */
    --shadow-l1: 0 1px 2px 0 rgba(20, 20, 82, 0.04);
    --shadow-l2: 0 4px 8px 0 rgba(20, 20, 82, 0.08), 0 0 1px 0 rgba(20, 20, 82, 0.04);
    --shadow-l3: 0 0 10px 0 rgba(20, 20, 82, 0.05), 0 0 6px 0 rgba(20, 20, 82, 0.05), 0 0 6px 0 rgba(20, 20, 82, 0.05);
    --shadow-l4: 0 15px 30px 0 rgba(20, 20, 82, 0.10), 0 5px 10px 0 rgba(20, 20, 82, 0.05), 0 2px 4px 0 rgba(20, 20, 82, 0.05);
    --shadow-l5: 0 15px 30px 0 rgba(20, 20, 82, 0.10), 0 10px 20px 0 rgba(20, 20, 82, 0.05), 0 3px 6px 0 rgba(20, 20, 82, 0.05);

    /* Focus rings: dark surface gets a #13131d inner separator */
    --focus-ring-subtle: 0 0 0 2px #13131d, 0 0 0 4px #6662cb;
    --focus-ring-strong: 0 0 0 2px #13131d, 0 0 0 6px #6662cb;
}

[data-theme="dark"].theme-global-payments,
[data-theme="dark"] .theme-global-payments {
    --color-brand-primary:           #8b8eff;
    --color-brand-primary-focus:     #6360cd;
    --color-brand-primary-highlight: #262262;
    --color-brand-primary-subtle:    #202039;
    --color-container-brand:         #202039;
    --color-container-brand-inverse: #8b8eff;
}

/* =============================================================
   Optional: self-host the WP-recommended fonts
   To self-host instead of the Google Fonts CDN, drop the .ttf
   or .woff2 files into Content/fonts/ and uncomment.
   =============================================================
@font-face { font-family: "Inter";      src: url("/Content/fonts/Inter-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";      src: url("/Content/fonts/Inter-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";      src: url("/Content/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";      src: url("/Content/fonts/Inter-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Blinker";    src: url("/Content/fonts/Blinker-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("/Content/fonts/ChivoMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
*/