/* ============================================================
   alphacom — Ella Supermarket parity tokens
   Dual-font (Rubik + DM Sans), 40px pill language, 0-radius cards
   floating on F5F5F5 page. Brand orange #FF6A01 shared with Ella.
   Back-compat aliases preserve existing rules.
   ============================================================ */
:root {
    /* ------- BRAND ------- */
    --color-brand: #FF6A01;
    --color-brand-hover: #E55F00;
    --color-brand-soft: #FFF4EC;

    /* ------- NEUTRAL SCALE (Ella-aligned) ------- */
    --stone-50:  #FAFAFA;   /* header nav row bg */
    --stone-100: #F5F5F5;   /* page canvas (Ella's default) */
    --stone-200: #E7E1D6;   /* borders (kept warm for brand continuity) */
    --stone-300: #D4CCBD;
    --stone-400: #A9A293;
    --stone-500: #7C7565;
    --stone-600: rgba(35, 35, 35, 0.6);   /* muted fg (Ella) */
    --stone-700: #4A4437;
    --stone-800: #2F2A22;
    --stone-900: #232323;   /* Ella's near-black text */

    /* ------- TEXT ------- */
    --color-fg: #232323;
    --color-fg-strong: #000000;
    --color-fg-soft: #2F2A22;
    --color-fg-muted: rgba(35, 35, 35, 0.6);
    --color-fg-faint: #A9A293;

    /* ------- SURFACE ROLES ------- */
    --surface-page:   #F5F5F5;    /* page canvas (Ella) */
    --surface-subtle: #FAFAFA;    /* header nav, zebra rows */
    --surface-soft:   #FFFFFF;    /* cards' inner image plate */
    --surface-raised: #FFFFFF;    /* modals, popovers, drawers, inputs */

    /* ------- BACKGROUNDS (compat aliases for existing rules) ------- */
    --color-bg: #F5F5F5;
    --color-bg-soft: #FAFAFA;
    --color-bg-muted: #F5F5F5;
    --color-bg-tint: #F5F5F5;
    --color-bg-dark: #1c1915;

    /* ------- BORDERS ------- */
    --color-border: #E7E1D6;                /* soft dividers */
    --color-border-strong: #000000;         /* Ella: pure black on inputs + ghost buttons */
    --color-input-border: #000000;
    --color-border-light: #E7E1D6;

    /* ------- BADGES ------- */
    --badge-sale-bg: #ffe8e7;
    --badge-sale-fg: #e95144;
    --badge-new-bg:  #d2e7ff;
    --badge-new-fg:  #007ffe;
    --badge-hot-bg:  #ffe8e7;
    --badge-hot-fg:  #e95144;
    --badge-custom-bg: #d7ffd2;
    --badge-custom-fg: var(--stone-900);
    --color-stock-hot: #d62828;
    --color-accent-gold: #fdca33;

    /* ------- COMPAT COLOR ALIASES ------- */
    --color-primary: var(--color-fg);
    --color-primary-dark: #000000;
    --color-secondary: var(--color-brand);
    --color-secondary-dark: var(--color-brand-hover);
    --color-white: var(--color-bg);
    --color-text: var(--color-fg);
    --color-text-secondary: var(--color-fg-muted);
    --color-text-muted: var(--color-fg-faint);
    --color-bg-warm: var(--color-brand-soft);
    --color-sale: var(--badge-sale-fg);
    --color-new:  var(--badge-new-fg);
    --color-hot:  var(--badge-hot-fg);
    --color-success: #22c55e;
    --color-warning: var(--color-accent-gold);
    --color-error: var(--badge-sale-fg);
    --color-info: var(--badge-new-fg);
    --color-gradient: none;

    /* ------- TYPOGRAPHY (Ella dual-font) ------- */
    --font-heading: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sub:     var(--font-body);
    --font-brand:   var(--font-heading);
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;        /* Ella: headings and buttons are 700 */
    --fw-heavy: 700;

    /* Type scale — Ella uses fixed sizes more than clamps */
    --text-xs:   0.75rem;    /* 12px — badge, xs labels */
    --text-sm:   0.875rem;   /* 14px — vendor, small body */
    --text-base: 1rem;       /* 16px — body */
    --text-md:   1rem;
    --text-lg:   1.125rem;   /* 18px — footer heading */
    --text-xl:   1.25rem;    /* 20px — section head, PDP title */
    --text-2xl:  1.875rem;   /* 30px — mid heading */
    --text-3xl:  2.5rem;     /* 40px */
    --text-4xl:  3.125rem;   /* 50px — h1 (shop, cart, PDP hero) */
    --text-hero: clamp(2.5rem, 1.6rem + 3.5vw, 3.75rem);  /* 40→60px */
    --text-display: clamp(2.5rem, 1.6rem + 3.5vw, 3.75rem);
    --text-section-head: 1.25rem;  /* 20px — Ella's signature */

    /* Line heights */
    --lh-display: 1.1;       /* Ella: near-1 for massive display */
    --lh-tight: 1.1;
    --lh-heading: 1.1;
    --lh-body: 1.4;          /* Ella: 1.4 tighter than 1.5-1.6 */

    /* Letter spacing */
    --ls-display: 0;
    --ls-heading: 0;
    --ls-eyebrow: 0.04em;    /* vendor uppercase */
    --ls-button:  1px;       /* Ella signature spaced bold */

    /* ------- 4PX SPACING SCALE (rigid; used for component internals) ------- */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px — section padding */

    /* ------- FLUID SPACING (existing, kept for layout rhythm) ------- */
    --space-xs:  clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm:  clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md:  clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --space-lg:  clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
    --space-xl:  clamp(2.5rem, 1.5rem + 5vw, 5rem);
    --space-2xl: clamp(4rem, 2.5rem + 7.5vw, 8rem);
    --space-section: clamp(5rem, 3rem + 6vw, 9rem);

    /* ------- LAYOUT ------- */
    --container-max: 1280px;       /* 2026 B2B catalog standard */
    --container-wide: 1440px;      /* full-bleed hero/footer */
    --container-narrow: 960px;
    --container-padding: 24px;

    /* ------- RADII (Ella: 40px pill language, 0 cards) ------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 40px;           /* Ella signature — all interactive */
    --radius-input: 100px;         /* full-pill inputs (newsletter-style) */
    --radius-badge: 15px;          /* Ella badges */
    --radius-card: 0;              /* Ella cards = no radius */
    --radius-tile: 0;              /* category tiles use circles via 50% below */
    --radius-circle: 50%;

    /* ------- SHADOWS — layered, warm-tinted (stone-900 hue) ------- */
    --shadow-xs: 0 1px 2px rgb(28 25 21 / 0.04);
    --shadow-sm: 0 1px 2px rgb(28 25 21 / 0.05), 0 2px 4px rgb(28 25 21 / 0.04);
    --shadow-md: 0 2px 4px rgb(28 25 21 / 0.06), 0 4px 8px rgb(28 25 21 / 0.05), 0 8px 16px rgb(28 25 21 / 0.04);
    --shadow-lg: 0 4px 8px rgb(28 25 21 / 0.06), 0 12px 24px rgb(28 25 21 / 0.08);
    --shadow-xl: 0 8px 16px rgb(28 25 21 / 0.07), 0 24px 48px rgb(28 25 21 / 0.10);
    --shadow-card: var(--shadow-sm);

    /* ------- MOTION (Ella) ------- */
    --dur-fast: 150ms;
    --dur-base: 250ms;            /* Ella hover transition */
    --dur-slow: 350ms;
    --duration-fast: var(--dur-fast);
    --duration-base: var(--dur-base);
    --duration-slow: var(--dur-slow);

    --ease-enter:     cubic-bezier(0.7, 0, 0.3, 1);       /* Ella's --cubic-smooth */
    --ease-smooth:    cubic-bezier(0.7, 0, 0.3, 1);
    --ease-exit:      cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-default:   var(--ease-enter);
    --ease-out-smooth: var(--ease-enter);

    --hover-lift:  4px;            /* Ella card hover translateY */
    --hover-scale: 1.03;

    /* ------- Z-INDEX ------- */
    --z-dropdown: 100;
    --z-header: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-bottom-nav: 250;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.tabular-nums,
.price,
.pcard-price,
.woocommerce-Price-amount,
.product_meta .sku,
.product-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================
   CORNER-SHAPE (2026): progressive enhancement for squircle tiles
   Only applies where opted-in with .corner-squircle helper.
   ============================================================ */
@supports (corner-shape: squircle) {
    .corner-squircle { corner-shape: squircle; }
}