/* ============================================================
   CC UI — design tokens + reusable components (shared foundation)
   Consumed by our cc_* front-office modules and the redesigned CMS pages.

   Tokens are global custom properties, namespaced --cc-* so they never
   collide with the theme. Nothing is styled until an element opts in with
   a cc- class, so this file is safe to load site-wide.

   MULTISHOP — two brands, one design system.
   The palette below is the PALETTE (raw colours). The SEMANTIC tokens
   (--cc-accent, --cc-surface-deep, --cc-accent-1..7) are what components
   actually consume, and each falls back to the palette value that shop 3
   (El Informal) already ships. cc_ui.php overrides only the semantic ones,
   per shop, from the Back office (displayHeader, after the stylesheets).

   Consequence, and the point of the indirection: a shop with no brand
   configured emits no override at all and renders exactly as before.
   El Informal is the fallback; Tus Disfraces Baratos opts in to red.
   Components must use the semantic token — never --cc-blue/--cc-navy
   directly — or they will stay blue on a red storefront.

   THE SIGNATURE BAR comes in two forms; both must use --cc-accent-1..7:
     - markup:   <div class="cc-spectrum"><i>x7</i></div>
     - gradient: linear-gradient(90deg, var(--cc-accent-1) 0 14.2857%, ...)
   The seven-band rainbow is EL INFORMAL'S LOGO. Hardcoding --cc-pink...--cc-purple
   in a gradient prints that brand's mark on every storefront — it already did, on
   the other shop's home page. Raw palette tokens are fine for a genuinely semantic
   colour (the discount badge's pink, the delete hover) — never for the signature.
   ============================================================ */

:root {
  --cc-ground: #f5f6f8;
  --cc-surface: #ffffff;
  --cc-surface-2: #eef1f5;

  --cc-ink: #191c22;
  --cc-ink-soft: #565d6b;
  --cc-ink-faint: #8b93a1;

  --cc-brand: #12508f;
  --cc-brand-bright: #1a6fd0;
  --cc-navy: #0f2440;

  --cc-free: #2e9e4f;
  --cc-free-tint: #e7f4ec;

  /* brand spectrum — from the rainbow El Informal logo */
  --cc-pink: #e5197f;
  --cc-orange: #f5821f;
  --cc-yellow: #e0a70a;
  --cc-green: #3aa935;
  --cc-teal: #10a2c2;
  --cc-blue: #1a6fd0;
  --cc-purple: #7b2fa0;

  /* ---- semantic tokens (per-shop overridable) ----
     --cc-accent       the highlight: title underlines, focus rings, small emphasis
     --cc-surface-deep the dark ground: the footer's background
     --cc-accent-1..7  the signature bar's segments (rainbow here, solid elsewhere)
     Defaults reproduce El Informal's approved look exactly. */
  --cc-accent: var(--cc-blue);
  --cc-surface-deep: var(--cc-navy);

  --cc-accent-1: var(--cc-pink);
  --cc-accent-2: var(--cc-orange);
  --cc-accent-3: var(--cc-yellow);
  --cc-accent-4: var(--cc-green);
  --cc-accent-5: var(--cc-teal);
  --cc-accent-6: var(--cc-blue);
  --cc-accent-7: var(--cc-purple);

  --cc-hairline: rgba(20, 33, 61, .11);
  --cc-shadow-card: 0 1px 2px rgba(16, 28, 52, .04), 0 10px 28px -14px rgba(16, 28, 52, .16);
  --cc-shadow-lift: 0 2px 4px rgba(16, 28, 52, .05), 0 18px 40px -18px rgba(16, 28, 52, .22);

  --cc-radius: 14px;
  --cc-radius-sm: 10px;
  --cc-maxw: 1080px;
  /* the wide container: the product/category grids on the homepage (bestsellers,
     cc_seasonal, cc_buttonsgrid). 1080 is a reading width — right for CMS prose, far
     too narrow for four product cards, which came out visibly cramped next to the
     theme's own blocks. One token so those grids can never drift apart again. */
  --cc-maxw-wide: 1560px;
}

/* Local reset for any block that opts into the design system */
.cc-page, .cc-page * { box-sizing: border-box; }
.cc-page { color: var(--cc-ink); line-height: 1.6; }
.cc-page :where(h1, h2, h3, p) { margin: 0; }
/* Neutralise the theme/blob rules `.cms-description h2/h3 { padding-bottom:.8em }`
   which otherwise leak a big gap under every heading in our CMS pages. Scoped to
   .cms-description .cc-page so it out-specifies `.cms-description hN` but NEVER
   touches the footer (whose .cc-page wrapper lives outside .cms-description and
   whose titles rely on their own padding-bottom for the underline). */
.cms-description .cc-page :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }

/* ---- signature bar ----
   Seven segments, always. El Informal paints them as its logo's rainbow;
   Tus Disfraces Baratos sets all seven to its red and the same markup reads
   as one solid bar. Per-shop styling with no per-shop template. */
.cc-spectrum { display: flex; height: 4px; width: 120px; border-radius: 4px; overflow: hidden; }
.cc-spectrum > i { flex: 1; }
.cc-spectrum > i:nth-child(1) { background: var(--cc-accent-1); }
.cc-spectrum > i:nth-child(2) { background: var(--cc-accent-2); }
.cc-spectrum > i:nth-child(3) { background: var(--cc-accent-3); }
.cc-spectrum > i:nth-child(4) { background: var(--cc-accent-4); }
.cc-spectrum > i:nth-child(5) { background: var(--cc-accent-5); }
.cc-spectrum > i:nth-child(6) { background: var(--cc-accent-6); }
.cc-spectrum > i:nth-child(7) { background: var(--cc-accent-7); }

/* ---- card ---- */
.cc-card { background: var(--cc-surface); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-card); }
.cc-card--hover { transition: transform .18s ease, box-shadow .18s ease; }
.cc-card--hover:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-lift); }

/* ---- button ---- */
.cc-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; line-height: 1; padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--cc-brand); color: #fff; transition: background .16s ease, transform .16s ease; }
.cc-btn:hover { background: var(--cc-surface-deep); transform: translateY(-1px); color: #fff; }
.cc-btn--ghost { background: transparent; color: var(--cc-brand); box-shadow: inset 0 0 0 1.5px var(--cc-brand); }

@media (prefers-reduced-motion: reduce) {
  .cc-card--hover, .cc-btn { transition: none; }
}