/* =====================================================================
   Allen Web Ecommerce — Colors & Typography
   Source of truth: DESIGN.md + PRODUCT.md from
   baudelioandalon/AllenMultiplatform @ feature/home

   IMPORTANT: DESIGN.md says Allen is mobile-only ("No layouts web").
   This system is an INTENTIONAL EXCEPTION: a web ecommerce surface
   that extrapolates the same tokens (black hub + ecommerce-blue accent,
   Inter Variable, M3 Expressive shapes, spacious density) into a
   web grid. Confirmed go-ahead from product.

   This system deliberately stays in the ECOMMERCE vertical only —
   the blue accent (#348FDD) is the surface color. Food/Travel/Experts
   tokens are kept for reference but not used in this web surface.
   ===================================================================== */

/* Inter Variable from Google Fonts.
   SUBSTITUTION: DESIGN.md says "Inter Variable bundled in commonMain".
   The repo actually ships Montserrat/Onest/Roboto — no Inter TTF.
   We load Inter from Google Fonts CDN. Replace with bundled TTFs
   when the team adds them. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ============================================================
     COLOR — primary system (5: hub black + 4 verticals)
     Per DESIGN.md "Color — 5 primary (1 general NEGRO + 4 por vertical)"
     ============================================================ */
  --hub-black:        #000000;  /* Allen identity — logo, header, hub surfaces */
  --hub-black-soft:   #0E0E10;  /* near-black for header tint, off-black */
  --vert-ecommerce:   #348FDD;  /* this surface's primary */
  --vert-ecom-end:    #95C1FB;  /* gradient pair (PrimaryEndColor) */
  --vert-food:        #7C3AED;  /* reference only */
  --vert-travel:      #FF5722;  /* reference only */
  --vert-experts:     #00897B;  /* reference only */

  /* Primary aliases for this surface */
  --primary:          var(--vert-ecommerce);
  --primary-soft:     #EAF2FB;   /* tinted (5% blue mixed into off-white) */
  --primary-hover:    #2E7FC4;   /* OKLCH darken by ~6% */
  --primary-press:    #2870AB;   /* darken by ~12% */
  --primary-fg:       #FFFFFF;   /* on-primary text */

  /* ============================================================
     NEUTRALS — "tinteados hacia el hue del vertical, NO #fff puro"
     ============================================================ */
  --bg:               #FBFBFD;  /* page bg — off-white tinted toward blue */
  --bg-elev-1:        #FFFFFF;  /* card surface */
  --bg-elev-2:        #F4F6FA;  /* darker surface, hover row */
  --bg-section:       #F5F6F8;  /* alternating section bg (GrayBackgroundMain) */
  --bg-search:        #F7F9F8;  /* GrayBackgroundSearch */
  --bg-branding:      #ECF3FC;  /* GrayBrandingBackground */
  --bg-category:      #F0F3F7;  /* GrayCategoryBackground */

  /* Text — warm near-black per DESIGN.md "near-black cálido" */
  --fg:               #18181B;  /* body text */
  --fg-strong:        #0A0A0B;  /* headings */
  --fg-muted:         #515259;  /* GrayHomeSellerLetter */
  --fg-soft:          #707070;  /* GrayStrong */
  --fg-subtle:        #858585;  /* GraySubtitleBottom */
  --fg-hint:          #A0A0A0;  /* GrayLetterHint */
  --fg-disabled:      #C2C3C1;  /* GrayLetterArrow */
  --fg-on-dark:       #FFFFFF;
  --fg-on-dark-muted: rgba(255,255,255,.72);

  /* Borders */
  --border:           #E5E5E5;  /* GrayBorderThin */
  --border-soft:      #EFEFEF;  /* GrayBorderLight */
  --border-strong:    #D9D9DD;  /* GrayBorderSearch */
  --border-input:     #BABBBD;  /* GrayBorder */
  --border-unsel:     #D1D5DB;  /* UnselectedGray */
  --divider:          #EFEFEF;

  /* ============================================================
     SEMANTIC — status / utility (from Color.kt)
     ============================================================ */
  --success:          #42B883;  /* SuccessGreen — canonical */
  --success-alt:      #6EC46A;  /* SuccessColor — alt */
  --success-strong:   #51BC9D;  /* GreenStrong */
  --discount:         #52B093;  /* DiscountGreen — price badges */
  --warning:          #F7C65A;  /* WarningColor */
  --error:            #EA6965;  /* ErrorColor */
  --star:             #F7CF52;  /* StarColor */

  /* Soft tints (utility backgrounds) */
  --success-bg:       #E7F6EE;
  --warning-bg:       #FDF5DF;
  --error-bg:         #FDEAE9;
  --discount-bg:      #E5F2EA;
  --orange-bg:        #FDEFEA;

  /* ============================================================
     CATEGORY TINTS — used by product cards and category tiles.
     Light: soft pastels. Dark: low-opacity rgba so the hue reads
     in dark mode without breaking surface hierarchy.
     ============================================================ */
  --tint-green:  #E6EDDB;
  --tint-pink:   #F2DFE6;
  --tint-blue:   #DAE1F4;
  --tint-orange: #F7D5A8;
  --tint-beige:  #E8D3C3;
  --cat-ico-bg:  rgba(255, 255, 255, 0.7);   /* inner white blob behind category icon */

  /* ============================================================
     SHAPE — M3 Expressive XL rounded
     Per DESIGN.md: extraLarge 28, large 20, medium 16, small 12, xs 8
     ============================================================ */
  --radius-xs:        8px;
  --radius-sm:        12px;
  --radius-md:        16px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-pill:      9999px;
  --radius-input:     12px;     /* form inputs */
  --radius-card:      20px;     /* product cards */
  --radius-image:     16px;     /* product image inside card */
  --radius-banner:    28px;     /* hero banners — M3 extraLarge */

  /* ============================================================
     SPACING — DESIGN.md spacious tokens
     xs 4 · sm 8 · md 16 · lg 24 (padding default) · xl 32 · xxl 48
     Plus web-only macro tokens for sections.
     ============================================================ */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         32px;
  --space-2xl:        48px;
  --space-3xl:        72px;    /* web section gap */
  --space-4xl:        96px;    /* hero / page top */

  /* Sizes */
  --touch:            48px;    /* min touch target */
  --row-h:            56px;
  --row-h-lg:         64px;
  --appbar:           80px;    /* web header */
  --fab:              56px;

  /* Container widths */
  --container:        1240px;  /* main content max-width */
  --container-narrow: 880px;   /* PDP body, checkout */

  /* ============================================================
     ELEVATION — M3 tonal; no decorative shadows
     "Glass/blur solo si es intencional, nunca decorativo por default"
     ============================================================ */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 18, 27, .04), 0 1px 1px rgba(15, 18, 27, .03);
  --elev-2: 0 2px 8px rgba(15, 18, 27, .06), 0 1px 3px rgba(15, 18, 27, .04);
  --elev-3: 0 8px 24px rgba(15, 18, 27, .08), 0 2px 6px rgba(15, 18, 27, .04);
  --elev-pop: 0 12px 36px rgba(15, 18, 27, .12);

  /* Colored CTA shadow — only for primary actions */
  --elev-cta-blue: 0 8px 18px rgba(52, 143, 221, .28);

  /* ============================================================
     MOTION — "Ease-out exponencial. Sin bounce/elastic."
     ============================================================ */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;

  /* ============================================================
     TYPOGRAPHY — Inter Variable, M3 scale (ratio ≥1.25)
     Per DESIGN.md: displayLarge 57sp, headlineLarge 32, titleLarge 22,
     bodyLarge 16, labelMedium 12 — converted to web px and extended.
     ============================================================ */
  --font-sans:        "Inter", "Inter Variable", system-ui, -apple-system,
                      "Segoe UI", Roboto, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Display + headline */
  --t-display-lg:     57px;  --t-display-lg-line: 1.05;  --t-display-lg-track: -0.02em;
  --t-display:        45px;  --t-display-line:    1.08;  --t-display-track:    -0.02em;
  --t-display-sm:     36px;  --t-display-sm-line: 1.1;   --t-display-sm-track: -0.018em;
  --t-headline-lg:    32px;  --t-headline-lg-line:1.15;  --t-headline-lg-track:-0.015em;
  --t-headline:       28px;  --t-headline-line:   1.2;   --t-headline-track:   -0.01em;
  --t-headline-sm:    24px;  --t-headline-sm-line:1.25;  --t-headline-sm-track: -0.005em;

  /* Title */
  --t-title-lg:       22px;  --t-title-lg-line: 1.3;
  --t-title:          18px;  --t-title-line:    1.35;
  --t-title-sm:       16px;  --t-title-sm-line: 1.4;

  /* Body */
  --t-body-lg:        18px;  --t-body-lg-line:  1.55;
  --t-body:           16px;  --t-body-line:     1.55;
  --t-body-sm:        14px;  --t-body-sm-line:  1.5;

  /* Label */
  --t-label-lg:       14px;  --t-label-lg-line: 1.35;
  --t-label:          13px;  --t-label-line:    1.3;
  --t-label-sm:       12px;  --t-label-sm-line: 1.3;

  /* Money — strong, tight tracking */
  --t-price-xl:       40px;  --t-price-xl-line: 1;
  --t-price-lg:       28px;  --t-price-lg-line: 1.1;
  --t-price:          22px;  --t-price-line:    1.15;
  --t-price-sm:       16px;  --t-price-sm-line: 1.2;
}

/* =====================================================================
   BASE RESET — keep light
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-line);
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";  /* Inter's stylistic alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
.display-lg  { font: 800 var(--t-display-lg)/var(--t-display-lg-line) var(--font-sans); letter-spacing: var(--t-display-lg-track); color: var(--fg-strong); margin: 0; }
.display     { font: 800 var(--t-display)/var(--t-display-line) var(--font-sans); letter-spacing: var(--t-display-track); color: var(--fg-strong); margin: 0; }
.display-sm  { font: 700 var(--t-display-sm)/var(--t-display-sm-line) var(--font-sans); letter-spacing: var(--t-display-sm-track); color: var(--fg-strong); margin: 0; }
.headline-lg { font: 700 var(--t-headline-lg)/var(--t-headline-lg-line) var(--font-sans); letter-spacing: var(--t-headline-lg-track); color: var(--fg-strong); margin: 0; }
.headline    { font: 700 var(--t-headline)/var(--t-headline-line) var(--font-sans); letter-spacing: var(--t-headline-track); color: var(--fg-strong); margin: 0; }
.headline-sm { font: 700 var(--t-headline-sm)/var(--t-headline-sm-line) var(--font-sans); letter-spacing: var(--t-headline-sm-track); color: var(--fg-strong); margin: 0; }
.title-lg    { font: 600 var(--t-title-lg)/var(--t-title-lg-line) var(--font-sans); color: var(--fg-strong); margin: 0; }
.title       { font: 600 var(--t-title)/var(--t-title-line) var(--font-sans); color: var(--fg-strong); margin: 0; }
.title-sm    { font: 600 var(--t-title-sm)/var(--t-title-sm-line) var(--font-sans); color: var(--fg-strong); margin: 0; }
.body-lg     { font: 400 var(--t-body-lg)/var(--t-body-lg-line) var(--font-sans); color: var(--fg); }
.body        { font: 400 var(--t-body)/var(--t-body-line) var(--font-sans); color: var(--fg); }
.body-sm     { font: 400 var(--t-body-sm)/var(--t-body-sm-line) var(--font-sans); color: var(--fg-muted); }
.label-lg    { font: 500 var(--t-label-lg)/var(--t-label-lg-line) var(--font-sans); color: var(--fg-muted); }
.label       { font: 500 var(--t-label)/var(--t-label-line) var(--font-sans); color: var(--fg-muted); }
.label-sm    { font: 500 var(--t-label-sm)/var(--t-label-sm-line) var(--font-sans); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; }

.price-xl    { font: 800 var(--t-price-xl)/var(--t-price-xl-line) var(--font-sans); letter-spacing: -0.02em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.price-lg    { font: 700 var(--t-price-lg)/var(--t-price-lg-line) var(--font-sans); letter-spacing: -0.01em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.price       { font: 700 var(--t-price)/var(--t-price-line) var(--font-sans); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.price-sm    { font: 700 var(--t-price-sm)/var(--t-price-sm-line) var(--font-sans); color: var(--fg-strong); font-variant-numeric: tabular-nums; }

/* =====================================================================
   SELECTION
   ===================================================================== */
::selection { background: color-mix(in oklch, var(--primary) 24%, transparent); color: var(--fg-strong); }

/* =====================================================================
   DARK MODE — overlay
   Triggered by data-theme="dark" on <html>. Preserves brand identity:
   hub-black stays black, primary stays #348FDD (slightly tuned).
   Neutrals invert; shadows deepen; semantic tints get muted overlays.
   PRODUCT.md mandates dark mode day-one on mobile; this is the web counterpart.
   ===================================================================== */
:root[data-theme="dark"] {
  /* primary stays — slight hover/press shift toward light */
  --primary-soft:     rgba(52, 143, 221, 0.18);
  --primary-hover:    #5BA6E8;
  --primary-press:    #2E7FC4;

  /* surfaces — warm near-black ramp */
  --bg:               #0E0E10;
  --bg-elev-1:        #18181B;
  --bg-elev-2:        #23232A;
  --bg-section:       #131316;
  --bg-search:        #1F1F23;
  --bg-branding:      rgba(52, 143, 221, 0.12);
  --bg-category:      #1F1F23;

  /* foreground — warm off-white ramp */
  --fg:               #F3F3F5;
  --fg-strong:        #FAFAFC;
  --fg-muted:         #B5B6BA;
  --fg-soft:          #9FA0A8;
  --fg-subtle:        #858585;
  --fg-hint:          #6B6B70;
  --fg-disabled:      #4B4B4B;
  --fg-on-dark:       #FFFFFF;
  --fg-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* borders / dividers — darker */
  --border:           #2A2A30;
  --border-soft:      #23232A;
  --border-strong:    #3A3A40;
  --border-input:     #4B4B4B;
  --border-unsel:     #3A3A40;
  --divider:          #23232A;

  /* semantic — same hue, darker tinted backgrounds */
  --success-bg:       rgba(66, 184, 131, 0.16);
  --warning-bg:       rgba(247, 198, 90, 0.16);
  --error-bg:         rgba(234, 105, 101, 0.16);
  --discount-bg:      rgba(82, 176, 147, 0.18);
  --orange-bg:        rgba(242, 113, 76, 0.18);

  /* favorite — stays purple but tint darker */
  --favorite-unselected: rgba(255, 255, 255, 0.06);

  /* category tints — low-opacity rgba in dark mode */
  --tint-green:  rgba(110, 196, 106, 0.14);
  --tint-pink:   rgba(247, 209, 224, 0.10);
  --tint-blue:   rgba(149, 193, 251, 0.14);
  --tint-orange: rgba(247, 213, 168, 0.12);
  --tint-beige:  rgba(232, 211, 195, 0.10);
  --cat-ico-bg:  rgba(255, 255, 255, 0.08);

  /* elevation — strong dark shadows */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.45);
  --elev-pop: 0 20px 48px rgba(0, 0, 0, 0.7);
  --elev-cta-blue: 0 8px 18px rgba(52, 143, 221, 0.45);
}

/* Smooth color transitions when toggling theme — only on bg & color,
   keep transforms / opacity instant for motion clarity. */
html, body,
.allen-card, .card-surface, [class*="bg"], [class*="border"],
header, footer, nav, main, section, aside, article {
  transition: background-color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart);
}