/* =========================================================
   Application UI - Pagination Variables
   Path: public/assets/app/components/pagination/variables.css

   Canonical Contract
   ---------------------------------------------------------
   runtime theme context -> component contract -> render aliases

   Rules:
   - reads only from --m-context-*
   - no raw color-* dependency
   - no layout logic
   - no business logic
   - no local palette invention
========================================================= */

:root {
    /* =====================================================
       1) METRICS — CONTAINER
    ===================================================== */

    --m-pagination-gap: 6px;
    --m-pagination-padding-y: 4px;
    --m-pagination-padding-x: 4px;

    /* =====================================================
       2) METRICS — ITEM
    ===================================================== */

    --m-pagination-item-min-width: 34px;
    --m-pagination-item-height: clamp(32px, var(--m-theme-pagination-item-height, 34px), 36px);
    --m-pagination-item-padding-inline: 8px;
    --m-pagination-item-radius: var(--m-theme-pagination-item-radius, var(--m-theme-button-radius, var(--m-radius-md, 7px)));
    --m-pagination-item-border-width: var(--m-theme-border-width, 1px);
    --m-pagination-item-shadow: var(--m-theme-table-shadow, var(--m-context-shadow));

    /* =====================================================
       3) METRICS — TYPOGRAPHY
    ===================================================== */

    --m-pagination-summary-font-size: 13px;
    --m-pagination-summary-font-weight: 500;
    --m-pagination-summary-line-height: 1.4;

    --m-pagination-item-font-size: 13px;
    --m-pagination-item-font-weight: 600;
    --m-pagination-item-line-height: 1;

    --m-pagination-nav-font-weight: 500;
    --m-pagination-ellipsis-font-size: 14px;
    --m-pagination-ellipsis-line-height: 1;

    /* =====================================================
       4) METRICS — MOTION
    ===================================================== */

    --m-pagination-transition-fast: 120ms ease;

    /* =====================================================
       5) METRICS — MOBILE
    ===================================================== */

    --m-pagination-mobile-gap: 6px;

    /* =====================================================
       6) RUNTIME CONTEXT BRIDGE
    ===================================================== */

    --m-pagination-context-surface: var(--m-context-surface);
    --m-pagination-context-surface-soft: var(--m-context-surface-soft);
    --m-pagination-context-surface-hover: var(--m-context-surface-hover);

    --m-pagination-context-border: var(--m-context-border);
    --m-pagination-context-border-subtle: var(--m-context-border-subtle);
    --m-pagination-context-border-strong: var(--m-context-border-strong);

    --m-pagination-context-text: var(--m-context-text);
    --m-pagination-context-text-soft: var(--m-context-text-soft);
    --m-pagination-context-text-faint: var(--m-context-text-faint);
    --m-pagination-context-text-inverse: var(--m-context-text-inverse);

    --m-pagination-context-accent: var(--m-context-accent-color);
    --m-pagination-context-focus-ring: var(--m-context-focus-ring);

    /* =====================================================
       7) COMPONENT CONTRACT — BASE
    ===================================================== */

    --m-pagination-bg: var(--m-theme-pagination-bg, transparent);

    --m-pagination-summary-text: var(--m-pagination-context-text-soft);

    --m-pagination-item-bg: var(--m-theme-pagination-item-bg, var(--m-pagination-context-surface));
    --m-pagination-item-text: var(--m-pagination-context-text);
    --m-pagination-item-border: var(--m-theme-pagination-item-border, var(--m-pagination-context-border));

    --m-pagination-item-hover-bg: var(--m-pagination-context-surface-hover);
    --m-pagination-item-hover-text: var(--m-pagination-context-text);
    --m-pagination-item-hover-border: var(--m-pagination-context-border-strong);

    --m-pagination-item-focus-bg: var(--m-pagination-item-bg);
    --m-pagination-item-focus-text: var(--m-pagination-item-text);
    --m-pagination-item-focus-border: var(--m-pagination-context-accent);
    --m-pagination-item-focus-ring: var(--m-pagination-context-focus-ring);

    --m-pagination-item-active-bg: var(--m-theme-pagination-item-active-bg, var(--m-pagination-context-accent));
    --m-pagination-item-active-text: var(--m-theme-pagination-item-active-text, var(--m-pagination-context-text-inverse));
    --m-pagination-item-active-border: var(--m-pagination-context-accent);

    --m-pagination-item-disabled-bg: var(--m-pagination-context-surface-soft);
    --m-pagination-item-disabled-text: var(--m-pagination-context-text-faint);
    --m-pagination-item-disabled-border: var(--m-pagination-context-border-subtle);

    --m-pagination-ellipsis-text: var(--m-pagination-summary-text);

    /* =====================================================
       8) RENDER ALIASES
    ===================================================== */

    --pagination_gap: var(--m-pagination-gap);
    --pagination_padding_y: var(--m-pagination-padding-y);
    --pagination_padding_x: var(--m-pagination-padding-x);

    --pagination_item_min_width: var(--m-pagination-item-min-width);
    --pagination_item_height: var(--m-pagination-item-height);
    --pagination_item_padding_inline: var(--m-pagination-item-padding-inline);
    --pagination_item_radius: var(--m-pagination-item-radius);
    --pagination_item_border_width: var(--m-pagination-item-border-width);
    --pagination_item_shadow: var(--m-pagination-item-shadow);

    --pagination_summary_font_size: var(--m-pagination-summary-font-size);
    --pagination_summary_font_weight: var(--m-pagination-summary-font-weight);
    --pagination_summary_line_height: var(--m-pagination-summary-line-height);

    --pagination_item_font_size: var(--m-pagination-item-font-size);
    --pagination_item_font_weight: var(--m-pagination-item-font-weight);
    --pagination_item_line_height: var(--m-pagination-item-line-height);

    --pagination_nav_font_weight: var(--m-pagination-nav-font-weight);
    --pagination_ellipsis_font_size: var(--m-pagination-ellipsis-font-size);
    --pagination_ellipsis_line_height: var(--m-pagination-ellipsis-line-height);

    --pagination_bg: var(--m-pagination-bg);
    --pagination_summary_text: var(--m-pagination-summary-text);

    --pagination_item_bg: var(--m-pagination-item-bg);
    --pagination_item_text: var(--m-pagination-item-text);
    --pagination_item_border: var(--m-pagination-item-border);

    --pagination_item_hover_bg: var(--m-pagination-item-hover-bg);
    --pagination_item_hover_text: var(--m-pagination-item-hover-text);
    --pagination_item_hover_border: var(--m-pagination-item-hover-border);

    --pagination_item_focus_bg: var(--m-pagination-item-focus-bg);
    --pagination_item_focus_text: var(--m-pagination-item-focus-text);
    --pagination_item_focus_border: var(--m-pagination-item-focus-border);
    --pagination_item_focus_ring: var(--m-pagination-item-focus-ring);

    --pagination_item_active_bg: var(--m-pagination-item-active-bg);
    --pagination_item_active_text: var(--m-pagination-item-active-text);
    --pagination_item_active_border: var(--m-pagination-item-active-border);

    --pagination_item_disabled_bg: var(--m-pagination-item-disabled-bg);
    --pagination_item_disabled_text: var(--m-pagination-item-disabled-text);
    --pagination_item_disabled_border: var(--m-pagination-item-disabled-border);

    --pagination_ellipsis_text: var(--m-pagination-ellipsis-text);

    --pagination_transition_fast: var(--m-pagination-transition-fast);

    --pagination_mobile_gap: var(--m-pagination-mobile-gap);
}