/*
 * Storefront Loyalty Hub token reference.
 *
 * This file is documentation-only. It mirrors the token groups from
 * `_tokens.scss` and explains the visual or behavioral area affected by each
 * group. Copy this file into the storefront hub Custom CSS field and edit the
 * values you want to override. These tokens do not style Shopify customer
 * account blocks.
 */

.jeri-loyalty-hub {
    /*
     * Public layout contract.
     *
     * These tokens define the page frame, section rhythm, card sizing, and
     * anchor scroll behavior. Merchant custom CSS and theme presets can override
     * these to make the hub feel denser, wider, more spacious, or better aligned
     * with sticky storefront headers.
     */
    --hub-max-width: 1140px; /* Maximum content width for the hub. */
    --hub-page-padding-block-start: clamp(18px, 3vw, 30px); /* Top page padding. */
    --hub-page-padding-inline: clamp(16px, 4vw, 40px); /* Left and right page padding. */
    --hub-page-padding-block-end: 72px; /* Bottom page padding. */
    --hub-section-gap: 40px; /* Vertical distance between major sections. */
    --hub-content-gap: 20px; /* Default gap inside section content. */
    --hub-grid-gap: 10px; /* Default gap for card grids. */
    --hub-anchor-offset: clamp(72px, 10vh, 128px); /* Offset used by hash links below sticky headers. */

    /*
     * Cards, media, pills, and buttons.
     *
     * These control the basic shape language of the hub. Lower radius values
     * create a sharper editorial style; higher values make cards, buttons, and
     * labels feel softer. Padding and gap changes affect every card-like block.
     */
    --hub-card-padding: 28px; /* Inner spacing for cards. */
    --hub-card-gap: 20px; /* Default internal card gap. */
    --hub-join-card-gap: var(--s-2-5); /* Compact spacing used in the guest join card. */
    --hub-card-border-width: 1px; /* Default card border thickness. */
    --hub-card-radius: 14px; /* Card corner radius. */
    --hub-media-radius: 12px; /* Image and media corner radius. */
    --hub-pill-radius: 999px; /* Fully rounded badges and pills. */
    --hub-button-radius: 999px; /* Fully rounded action buttons. */
    --hub-button-min-height: 42px; /* Minimum touch/click height for buttons. */
    --hub-button-padding: 11px 16px; /* Button internal spacing. */
    --hub-icon-button-size: 34px; /* Square size for icon-only buttons. */

    /*
     * Hero layout.
     *
     * These values shape the first viewport: text/media column balance, minimum
     * hero height, title wrapping, readable copy width, and media crop ratio.
     */
    --hub-hero-columns: minmax(0, 1.32fr) minmax(280px, 1fr);
    --hub-hero-min-height: 520px;
    --hub-hero-title-max-width: 13ch;
    --hub-copy-max-width: 48ch;
    --hub-media-aspect-ratio: 16 / 10;

    /*
     * Responsive grid defaults.
     *
     * Base, medium, and large values are consumed by responsive rules and theme
     * presets. The active `--hub-rewards-columns` and `--hub-earn-columns`
     * aliases let component styles use a single token while breakpoints swap the
     * value underneath.
     */
    --hub-rewards-columns: var(--hub-rewards-columns-base);
    --hub-rewards-columns-base: 2;
    --hub-rewards-columns-medium: 3;
    --hub-rewards-columns-large: 4;
    --hub-earn-columns: var(--hub-earn-columns-base);
    --hub-earn-columns-base: 1;
    --hub-earn-columns-medium: 2;
    --hub-earn-columns-large: 3;
    --hub-earn-row-height: 1fr;

    /*
     * Tier and carousel sizing.
     *
     * These tokens prevent tier cards and tier comparison columns from becoming
     * too narrow. The carousel width is capped against viewport width for mobile.
     */
    --hub-tier-min-column-width: 180px;
    --hub-tier-level-min-column-width: 190px;
    --hub-tier-carousel-card-width: min(320px, 82vw);

    /*
     * Modal and wallet sizing.
     *
     * These values control modal readability and wallet preview proportions.
     * Adjust them when modals feel too tall on mobile or wallet artwork feels
     * out of proportion beside text.
     */
    --hub-modal-width: 540px;
    --hub-modal-max-height: min(720px, 90svh);
    --hub-modal-action-width: 320px;
    --hub-compact-modal-max-height: min(680px, 92svh);
    --hub-wallet-button-min-width: 180px;
    --hub-wallet-preview-width: 230px;
    --hub-wallet-card-mock-width: 164px;
    --hub-wallet-badge-width: 106px;

    /*
     * Public semantic colors.
     *
     * These are the main customization tokens for merchants and presets. They
     * map theme editor settings into predictable page, surface, text, border,
     * accent, and accent-on-color pairs. Keep foreground/background pairs in sync
     * for contrast.
     */
    --hub-color-page-bg: #f8f8f8;
    --hub-color-surface: #ffffff;
    --hub-color-surface-subtle: #f1f1f1;
    --hub-color-text: var(--jeri-loyalty-text, #242424);
    --hub-color-text-soft: var(--jeri-loyalty-muted, #555555);
    --hub-color-text-muted: #686868;
    --hub-color-border: #d8d8d8;
    --hub-color-accent: var(--jeri-loyalty-primary, #050505);
    --hub-color-accent-hover: var(--hub-color-accent);
    --hub-color-on-accent: var(--jeri-loyalty-primary-contrast, #ffffff);
    --hub-color-accent-soft: var(--jeri-loyalty-secondary, color-mix(in srgb, var(--hub-color-accent) 10%, var(--hub-color-surface)));
    --hub-color-on-accent-soft: var(--hub-color-text);

    /*
     * Special-purpose colors.
     *
     * Hero and progress colors support gradients or paired surfaces. Success and
     * danger colors are used for confirmation/error states. Overlay, skeleton,
     * hover border, modal, reward media, and copy button colors keep repeated
     * UI states consistent across components.
     */
    --hub-color-hero-start: #e9e9e9;
    --hub-color-hero-end: #f6f6f6;
    --hub-color-progress-start: var(--hub-color-accent);
    --hub-color-progress-end: var(--hub-color-accent);
    --hub-color-success: #137333;
    --hub-color-on-success: #ffffff;
    --hub-color-success-bg: color-mix(in srgb, var(--hub-color-success) 10%, var(--hub-color-surface));
    --hub-color-success-border: color-mix(in srgb, var(--hub-color-success) 38%, var(--hub-color-border));
    --hub-color-danger: #b42318;
    --hub-color-danger-bg: color-mix(in srgb, var(--hub-color-danger) 10%, var(--hub-color-surface));
    --hub-color-danger-border: color-mix(in srgb, var(--hub-color-danger) 45%, var(--hub-color-border));
    --hub-color-overlay: rgba(0, 0, 0, 0.34);
    --hub-color-skeleton: color-mix(in srgb, var(--hub-color-surface) 78%, var(--hub-color-text-muted));
    --hub-color-card-border-hover: color-mix(in srgb, var(--hub-color-accent) 18%, var(--hub-color-border));
    --hub-color-modal-bg: var(--hub-color-surface);
    --hub-color-modal-surface-subtle: var(--hub-color-surface-subtle);
    --hub-color-modal-text: var(--hub-color-text);
    --hub-color-modal-text-soft: var(--hub-color-text-soft);
    --hub-color-modal-text-muted: var(--hub-color-text-muted);
    --hub-color-modal-border: var(--hub-color-border);
    --hub-color-reward-media-bg: var(--hub-color-accent-soft);
    --hub-color-copy-button-bg: var(--hub-color-accent-soft);
    --hub-color-copy-button-text: var(--hub-color-on-accent-soft);
    --hub-color-copy-button-done-bg: var(--hub-color-accent-soft);
    --hub-color-copy-button-done-text: var(--hub-color-on-accent-soft);

    /*
     * Elevation.
     *
     * Shadows describe card depth, hover depth, success badge lift, and modal
     * separation from the page overlay.
     */
    --hub-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
    --hub-shadow-card-sm: 0 1px 1px rgba(0, 0, 0, 0.04);
    --hub-shadow-reward-hover: 0 8px 24px -20px rgba(0, 0, 0, 0.32);
    --hub-shadow-success-badge: 0 8px 18px -12px rgba(19, 115, 51, 0.85);
    --hub-shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.18);

    /*
     * Typography.
     *
     * These tokens connect Shopify font picker settings and preset typography to
     * component styles. Heading and body families inherit from theme variables
     * when present, while labels default to the body family.
     */
    --hub-font-heading-family: var(--font-heading-family, "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --hub-font-body-family: var(--font-body-family, "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --hub-font-label-family: var(--hub-font-body-family);
    --hub-font-heading-weight: var(--font-heading-weight, 720);
    --hub-font-heading-style: var(--font-heading-style, normal);
    --hub-font-body-weight: var(--font-body-weight, 400);
    --hub-font-body-style: var(--font-body-style, normal);
    --hub-font-label-weight: 600;
    --hub-heading-transform: none;
    --hub-heading-line-height: 1.03;
    --hub-label-transform: none;
    --hub-label-color: var(--hub-color-text-muted);
    --hub-label-size: 13px;

    /*
     * Motion.
     *
     * The easing curve and shift distances are reused by hover, reveal, and
     * modal transitions so interactions feel consistent across the hub.
     */
    --hub-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --hub-motion-hover-lift: 1px;
    --hub-motion-shift-xs: 2px;
    --hub-motion-shift-sm: 8px;
    --hub-motion-shift-md: 10px;

    /*
     * Internal spacing scale and compatibility aliases.
     *
     * The `--s-*` scale keeps component spacing consistent. The aliases below
     * preserve older custom CSS names and provide short internal names for
     * component partials. New merchant-facing customization should prefer
     * public `--hub-*` tokens.
     */
    --maxw: var(--hub-max-width);
    --s-px: 1px;
    --s-0: 0;
    --s-0-5: 2px;
    --s-0-75: 3px;
    --s-1: 6px;
    --s-1-5: 8px;
    --s-2: 10px;
    --s-2-5: 12px;
    --s-3: 14px;
    --s-3-5: 16px;
    --s-4: 20px;
    --s-4-5: 24px;
    --s-5: 28px;
    --s-5-5: 32px;
    --s-6: 40px;
    --s-6-5: 48px;
    --s-7: 64px;
    --s-8: 72px;
    --ease: var(--hub-motion-ease);

    /*
     * Derived layout aliases.
     *
     * These combine public tokens and spacing scale values into reusable
     * component dimensions such as page padding, icon sizes, modal padding,
     * input padding, progress bar height, and carousel padding.
     */
    --page-pad-block: var(--hub-page-padding-block-start);
    --page-pad-inline: var(--hub-page-padding-inline);
    --page-pad-block-end: var(--hub-page-padding-block-end);
    --page-pad: var(--page-pad-block) var(--page-pad-inline) var(--page-pad-block-end);
    --badge-pad: calc(var(--s-1) - var(--s-0-5)) calc(var(--s-2) - var(--s-0-5));
    --pill-pad: var(--s-1) var(--s-2);
    --tier-pill-pad: calc(var(--s-2) / 2) var(--s-2);
    --button-gap: var(--s-1-5);
    --button-min-block: var(--hub-button-min-height);
    --button-pad: var(--hub-button-padding);
    --icon-button-size: var(--hub-icon-button-size);
    --icon-sm: var(--s-3-5);
    --earn-icon-size: var(--s-6-5);
    --earn-icon-column: calc(var(--earn-icon-size) + var(--s-1));
    --success-badge-size: calc(var(--s-4) + var(--s-0-5));
    --success-badge-offset: calc(-1 * var(--s-3) / 2);
    --success-icon-size: calc(var(--s-3) - var(--s-px));
    --modal-pad: var(--s-4);
    --modal-pad-mobile: var(--s-2-5);
    --modal-dialog-pad: var(--s-5);
    --modal-dialog-pad-mobile: var(--s-4);
    --modal-icon-size: calc(var(--s-7) - var(--s-0-5));
    --copy-control-size: var(--s-6-5);
    --copy-field-gap: calc(var(--s-3) / 2);
    --input-pad: var(--s-2) var(--s-2-5);
    --field-pad: calc(var(--s-2) - var(--s-px)) var(--s-2-5);
    --progress-height: calc(var(--s-2) - var(--s-px));
    --carousel-pad: var(--s-0-5) var(--s-0-5) var(--s-3);
    --motion-shift-xs: var(--hub-motion-shift-xs);
    --motion-shift-sm: var(--hub-motion-shift-sm);
    --motion-shift-md: var(--hub-motion-shift-md);
    --list-indent: 1.2em;

    /*
     * Semantic color aliases.
     *
     * Component partials mostly use these shorter aliases. They mirror the
     * public color tokens and add computed accent borders and focus rings.
     */
    --color-page-bg: var(--hub-color-page-bg);
    --color-surface: var(--hub-color-surface);
    --color-surface-muted: var(--hub-color-surface-subtle);
    --color-text: var(--hub-color-text);
    --color-text-soft: var(--hub-color-text-soft);
    --color-text-muted: var(--hub-color-text-muted);
    --color-border: var(--hub-color-border);
    --color-accent: var(--hub-color-accent);
    --color-accent-hover: var(--hub-color-accent-hover);
    --color-accent-contrast: var(--hub-color-on-accent);
    --color-accent-soft: var(--hub-color-accent-soft);
    --color-accent-soft-contrast: var(--hub-color-on-accent-soft);
    --color-hero-start: var(--hub-color-hero-start);
    --color-hero-end: var(--hub-color-hero-end);
    --color-progress-start: var(--hub-color-progress-start);
    --color-progress-end: var(--hub-color-progress-end);
    --color-success: var(--hub-color-success);
    --color-success-contrast: var(--hub-color-on-success);
    --color-success-bg: var(--hub-color-success-bg);
    --color-success-border: var(--hub-color-success-border);
    --color-danger: var(--hub-color-danger);
    --color-danger-bg: var(--hub-color-danger-bg);
    --color-danger-border: var(--hub-color-danger-border);
    --color-overlay: var(--hub-color-overlay);
    --color-skeleton: var(--hub-color-skeleton);
    --color-card-border-hover: var(--hub-color-card-border-hover);
    --color-reward-media-bg: var(--hub-color-reward-media-bg);
    --color-copy-button-bg: var(--hub-color-copy-button-bg);
    --color-copy-button-text: var(--hub-color-copy-button-text);
    --color-copy-button-done-bg: var(--hub-color-copy-button-done-bg);
    --color-copy-button-done-text: var(--hub-color-copy-button-done-text);
    --color-accent-border-muted: color-mix(in srgb, var(--color-accent) 26%, var(--color-border));
    --color-accent-border-subtle: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    --color-accent-border: color-mix(in srgb, var(--color-accent) 34%, var(--color-border));
    --color-accent-border-strong: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
    --color-focus-ring: color-mix(in srgb, var(--color-accent) 58%, transparent);

    /*
     * Shape, elevation, and typography aliases.
     *
     * These expose stable short names used by the component partials and older
     * merchant custom CSS. They should continue to resolve through public
     * `--hub-*` tokens where possible.
     */
    --bw: var(--hub-card-border-width);
    --r-card: var(--hub-card-radius);
    --r-img: var(--hub-media-radius);
    --r-pill: var(--hub-pill-radius);
    --r-btn: var(--hub-button-radius);
    --shadow-card: var(--hub-shadow-card);
    --shadow-card-sm: var(--hub-shadow-card-sm);
    --shadow-reward-hover: var(--hub-shadow-reward-hover);
    --shadow-success-badge: var(--hub-shadow-success-badge);
    --shadow-modal: var(--hub-shadow-modal);
    --font-display: var(--hub-font-heading-family);
    --display-wght: var(--hub-font-heading-weight);
    --display-transform: var(--hub-heading-transform);
    --display-leading: var(--hub-heading-line-height);
    --font-body: var(--hub-font-body-family);
    --font-label: var(--hub-font-label-family);
    --label-transform: var(--hub-label-transform);
    --label-wght: var(--hub-font-label-weight);
    --label-color: var(--hub-label-color);
    --label-size: var(--hub-label-size);

    /*
     * Type scale.
     *
     * Display and heading sizes are responsive clamps, while title/body/caption
     * sizes are fixed for predictable card density. Line-height and weight
     * tokens let components remain consistent when presets change fonts.
     */
    --type-display-size: clamp(30px, 4.1vw, 50px);
    --type-heading-size: clamp(24px, 3vw, 32px);
    --type-title-size: 20px;
    --type-body-size: 15.5px;
    --type-caption-size: var(--label-size);
    --type-caption-compact-size: calc(var(--type-caption-size) - var(--s-0-5));
    --type-caption-pill-size: calc(var(--type-caption-size) - var(--s-px));
    --type-display-line: var(--display-leading);
    --type-heading-line: 1.05;
    --type-title-line: 1.15;
    --type-body-line: 1.5;
    --type-caption-line: 1.2;
    --type-display-weight: var(--display-wght);
    --type-heading-weight: var(--display-wght);
    --type-title-weight: var(--display-wght);
    --type-heading-style: var(--hub-font-heading-style);
    --type-body-weight: var(--hub-font-body-weight);
    --type-body-style: var(--hub-font-body-style);
    --type-caption-style: var(--hub-font-body-style);
    --type-body-strong-weight: 700;
    --type-caption-weight: var(--label-wght);
    --type-caption-strong-weight: 700;
    --type-caption-heavy-weight: 800;

    /*
     * Legacy visual aliases.
     *
     * These names are intentionally short because earlier styles and merchant
     * overrides used them. They keep existing custom CSS working while new docs
     * and customization guidance point people to the public `--hub-*` contract.
     */
    --bg: var(--color-page-bg);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-muted);
    --ink: var(--color-text);
    --ink-soft: var(--color-text-soft);
    --ink-mute: var(--color-text-muted);
    --line: var(--color-border);
    --accent: var(--color-accent);
    --accent-2: var(--color-accent-hover);
    --accent-ink: var(--color-accent-contrast);
    --accent-soft: var(--color-accent-soft);
    --accent-soft-ink: var(--color-accent-soft-contrast);
    --shadow: var(--shadow-card);
    --shadow-sm: var(--shadow-card-sm);
    --btn-bg: transparent;
    --btn-ink: var(--ink);
    --btn-border: var(--line);
    --hero-a: var(--color-hero-start);
    --hero-b: var(--color-hero-end);
    --token-a: var(--color-progress-start);
    --token-b: var(--color-progress-end);

    /*
     * Root element defaults.
     *
     * These are not tokens; they apply the resolved token values to the hub root,
     * isolate box sizing, smooth text rendering, and establish the page minimum
     * height. Changes here affect the whole rendered hub.
     */
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-body);
    line-height: var(--type-body-line);
    min-height: 60svh;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;

}

.jeri-loyalty-hub *,
.jeri-loyalty-hub *::before,
.jeri-loyalty-hub *::after {
    box-sizing: border-box;
}