/**
 * ImporMurah Storefront Theme 2 CSS
 * Visual Foundation: Google Stitch Emerald & White Trade Utility
 * Scoped and isolated for impormurah.com storefront
 */

:root {
    --imr-bg: #FFFFFF;
    --imr-panel: #F5F7F6;
    --imr-card: #FFFFFF;
    --imr-border: #E2E7E3;
    --imr-border-subtle: #EDF1EE;
    --imr-text-primary: #121E17;
    --imr-text-secondary: #4F5E54;
    --imr-text-muted: #738379;
    --imr-primary: #0B7A51;
    --imr-primary-hover: #086341;
    --imr-primary-light: #E8F5EF;
    --imr-primary-content: #FFFFFF;
    --imr-accent: #0B7A51;

    /* Legacy token backward compatibility */
    --im-primary: #0B7A51;
    --im-primary-hover: #086341;
    --im-primary-active: #05482e;
    --im-primary-light: #E8F5EF;
    --im-secondary: #2b6954;
    --im-secondary-fixed: #b0f0d6;
    --im-secondary-fixed-dim: #95d3ba;
    --im-surface: #FFFFFF;
    --im-surface-subtle: #F5F7F6;
    --im-surface-container: #F5F7F6;
    --im-on-surface: #121E17;
    --im-on-surface-variant: #4F5E54;
    --im-border: #E2E7E3;
    --im-border-focus: #0B7A51;
    --im-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --im-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --im-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --im-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

html.dark {
    --imr-bg: #101714;
    --imr-panel: #1A2420;
    --imr-card: #151F1B;
    --imr-border: #324039;
    --imr-border-subtle: #232E28;
    --imr-text-primary: #F2F5F3;
    --imr-text-secondary: #AEBDB3;
    --imr-text-muted: #7E9084;
    --imr-primary: #55CEA0;
    --imr-primary-hover: #40B88A;
    --imr-primary-light: #162B22;
    --imr-primary-content: #072116;
    --imr-accent: #55CEA0;

    /* Legacy dark mappings */
    --im-primary: #55CEA0;
    --im-primary-hover: #40B88A;
    --im-primary-active: #2ea378;
    --im-primary-light: #162B22;
    --im-surface: #151F1B;
    --im-surface-subtle: #1A2420;
    --im-surface-container: #1A2420;
    --im-on-surface: #F2F5F3;
    --im-on-surface-variant: #AEBDB3;
    --im-border: #324039;
    --im-border-focus: #55CEA0;
}

/* Base resets scoped to storefront wrapper */
.tema2-storefront {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: var(--imr-text-primary);
    background-color: var(--imr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom interactive components */
.tema2-storefront a,
.tema2-storefront button,
.tema2-storefront input,
.tema2-storefront select {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tema2-storefront a:focus-visible,
.tema2-storefront button:focus-visible,
.tema2-storefront input:focus-visible,
.tema2-storefront select:focus-visible {
    outline: 2px solid var(--im-primary);
    outline-offset: 2px;
}

/* Clean cards */
.im-card {
    background-color: var(--im-surface);
    border: 1px solid var(--im-border);
    border-radius: 1rem;
    box-shadow: var(--im-shadow-sm);
}

.im-card:hover {
    box-shadow: var(--im-shadow-md);
    border-color: #cbd5e1;
}

/* Custom scrollbar subtle */
.tema2-storefront ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.tema2-storefront ::-webkit-scrollbar-track {
    background: transparent;
}
.tema2-storefront ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.tema2-storefront ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Badges */
.im-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.im-badge-primary {
    background-color: var(--im-primary-light);
    color: var(--im-primary);
}

.im-badge-emerald {
    background-color: #d1fae5;
    color: #065f46;
}

/* Tap targets minimum 44px */
.im-tap-target {
    min-height: 44px;
    min-width: 44px;
}

/* Smooth scroll with offset for fixed header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* Skeleton Loading Shimmer Animation */
@keyframes t3SkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.t3-skeleton {
    background: linear-gradient(90deg, 
        rgba(226, 232, 240, 0.6) 25%, 
        rgba(241, 245, 249, 0.9) 50%, 
        rgba(226, 232, 240, 0.6) 75%);
    background-size: 200% 100%;
    animation: t3SkeletonShimmer 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 12px;
}