/* ==========================================================================
   tokens/components.css — LAYER 3: COMPONENT TOKENS
   --------------------------------------------------------------------------
   Component-level aliases that point at layer 1 (base) and layer 2 (theme).
   Component CSS must consume THESE, never a raw value and never a layer-2
   token directly — that indirection is what lets Prompts 28–31 restyle a
   component by editing one alias, and Prompts 32–33 swap a theme without
   touching a single component rule.

   Why this file is separate from the theme file
     CSS custom properties resolve lazily: `--card-bg: var(--color-surface)` is
     a reference, not a copy. So these aliases are declared ONCE here and
     automatically follow whichever theme/mode is active. Putting them in
     theme-default.css would force every future theme file to redeclare them.

   Rule for every later prompt: if a component needs a value that is not here,
   ADD AN ALIAS HERE. Never introduce a raw colour, radius or shadow.
   ========================================================================== */

:root {
  /* ---- surfaces / page ------------------------------------------------ */
  --page-bg: var(--color-surface);
  --page-text: var(--color-text-muted);
  --section-alt-bg: var(--color-surface-alt);
  --divider-color: var(--color-border);

  /* Backdrop blur for translucent surfaces (Micro-prompt 35). `none` in every
     theme except liquid-glass, so the single rule that consumes it — the
     glass-surface group in style.css — is a no-op everywhere else. A theme
     cannot apply `backdrop-filter` from a token file without naming a selector,
     which the token-layer discipline forbids; this is the seam that avoids it. */
  --surface-blur: none;

  /* ---- header & navigation -------------------------------------------- */
  --header-bg: var(--color-surface);
  --header-text: var(--color-text);
  --header-border: var(--color-border);
  --nav-link-color: var(--color-text);
  --nav-link-hover-color: var(--color-brand-primary-text);
  --nav-active-color: var(--color-brand-primary-text);
  --topbar-bg: var(--color-brand-primary);
  --topbar-text: var(--color-brand-primary-contrast);
  --offcanvas-bg: var(--color-surface);
  --offcanvas-text: var(--color-text);

  /* ---- footer --------------------------------------------------------- */
  --footer-bg: var(--color-surface-alt);
  --footer-text: var(--color-text-muted);
  --footer-heading-color: var(--color-text);

  /* ---- buttons -------------------------------------------------------- */
  --button-radius: var(--radius-md);
  --button-padding-y: var(--space-3);
  --button-padding-x: var(--space-5);
  --button-font-weight: 600;

  --button-primary-bg: var(--color-brand-primary);
  --button-primary-text: var(--color-brand-primary-contrast);
  --button-primary-bg-hover: var(--color-brand-primary-hover);
  --button-primary-text-hover: var(--color-brand-primary-contrast);

  --button-accent-bg: var(--color-accent);
  --button-accent-text: var(--color-accent-contrast);
  --button-accent-bg-hover: var(--color-accent-hover);

  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-text: var(--color-brand-secondary-contrast);

  --button-outline-border: var(--color-border-strong);
  --button-outline-text: var(--color-text);
  --button-outline-bg-hover: var(--color-accent);
  --button-outline-text-hover: var(--color-accent-contrast);

  --button-danger-bg: var(--color-danger-subtle);
  --button-danger-text: var(--color-danger);
  --button-danger-bg-hover: var(--color-danger-subtle-hover);

  --button-success-bg: var(--color-success-subtle);
  --button-success-text: var(--color-success);
  --button-success-bg-hover: var(--color-success-subtle-hover);

  --button-warning-bg: var(--color-warning-subtle);
  --button-warning-text: var(--color-warning);
  --button-warning-bg-hover: var(--color-warning-subtle-hover);

  --button-link-color: var(--color-text);
  --button-link-color-hover: var(--color-brand-primary-text);

  /* ---- cards (product, category, panel) ------------------------------- */
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-border: var(--color-border);
  /* New in Micro-prompt 33. The card border was previously a literal `1px` in
     every card rule, which a theme could not thicken — the whole point of the
     neo-brutalist look. Consumed by .product-item, .brand-carousel .brand-item
     and .zm-pcard. */
  --card-border-width: 1px;
  --card-title-color: var(--color-text);
  --card-body-color: var(--color-text-muted);

  --product-card-bg: var(--card-bg);
  --product-card-radius: var(--card-radius);
  --product-card-shadow: var(--card-shadow);
  --product-card-shadow-hover: var(--card-shadow-hover);

  --category-card-bg: var(--card-bg);
  --category-card-radius: var(--card-radius);
  --category-card-shadow: var(--shadow-md);

  /* ---- badges / pills (discount, status, tags) ------------------------
     The size/weight/padding steps below now hold the values .zm-pcard-badge
     actually rendered as literals, so wiring that rule to these aliases
     (Micro-prompt 33) is a no-op for the default theme — the token finally
     documents reality instead of contradicting it. */
  --badge-radius: var(--radius-sm);
  --badge-font-size: 0.72rem;
  --badge-font-weight: 700;
  --badge-padding-y: 2px;
  --badge-padding-x: var(--space-2);
  --badge-bg: var(--color-danger);
  --badge-text: var(--color-danger-contrast);
  --badge-discount-bg: var(--color-danger);
  --badge-discount-text: var(--color-danger-contrast);
  --badge-success-bg: var(--color-success);
  --badge-success-text: var(--color-success-contrast);
  --badge-warning-bg: var(--color-warning);
  --badge-warning-text: var(--color-warning-contrast);
  --badge-neutral-bg: var(--color-surface-alt);
  --badge-neutral-text: var(--color-text-muted);

  /* ---- rating / price ------------------------------------------------- */
  --rating-star-color: var(--color-warning);
  --rating-text-color: var(--color-text-muted);
  --price-color: var(--color-brand-primary-text);
  --price-compare-color: var(--color-text-subtle);
  --price-currency-color: var(--color-text-muted);

  /* ---- forms ---------------------------------------------------------- */
  --input-radius: var(--radius-md);
  --input-bg: var(--color-surface);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-subtle);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-brand-primary);
  --input-bg-disabled: var(--color-surface-alt);
  --label-color: var(--color-text);
  --select-option-bg: var(--color-surface);
  --select-option-text: var(--color-text);

  /* ---- dropdown / menu / tooltip -------------------------------------- */
  --dropdown-bg: var(--color-surface);
  --dropdown-text: var(--color-text);
  --dropdown-border: var(--color-border);
  --dropdown-shadow: var(--shadow-overlay);
  --dropdown-item-hover-bg: var(--color-surface-alt);
  --dropdown-item-hover-text: var(--color-brand-primary-text);

  /* ---- overlays / modals / offcanvas / drawer ------------------------- */
  --overlay-backdrop: var(--color-surface-overlay);
  --modal-bg: var(--color-surface);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-overlay);
  --drawer-bg: var(--color-surface);
  --drawer-shadow: var(--shadow-lg);

  /* ---- carousel / swiper controls ------------------------------------- */
  --carousel-control-bg: var(--color-surface);
  --carousel-control-text: var(--color-text);
  --carousel-control-radius: var(--radius-md);
  --carousel-control-bg-hover: var(--color-brand-primary);
  --carousel-control-text-hover: var(--color-brand-primary-contrast);

  /* ---- table (dashboard, order summaries) ----------------------------- */
  --table-bg: var(--color-surface);
  --table-border: var(--color-border);
  --table-head-bg: var(--color-surface-alt);
  --table-head-text: var(--color-text);
  --table-row-hover-bg: var(--color-surface-alt);

  /* ---- feedback: toast, alert, preloader ------------------------------ */
  --toast-bg: var(--color-surface-inverse);
  /* Was `var(--color-surface)`. That reads correctly only while surfaces are
     opaque: the moment a theme makes `--color-surface` translucent (liquid
     glass, Micro-prompt 35) the toast text becomes translucent too. The text
     colour of a dark toast is the INVERSE of the text colour, which is what it
     always meant — identical in every shipped theme, and correct under glass. */
  --toast-text: var(--color-text-inverse);
  --toast-radius: var(--radius-md);
  --toast-shadow: var(--shadow-overlay);

  --alert-success-bg: var(--color-success-subtle);
  --alert-success-text: var(--color-success);
  --alert-danger-bg: var(--color-danger-subtle);
  --alert-danger-text: var(--color-danger);
  --alert-warning-bg: var(--color-warning-subtle);
  --alert-warning-text: var(--color-text);

  --preloader-bg: var(--color-surface);
  --preloader-accent: var(--color-brand-primary);
  --preloader-z: var(--z-preloader);

  /* ---- links ---------------------------------------------------------- */
  --link-color: var(--color-link);
  --link-hover-color: var(--color-link-hover);
  --link-underline-color: var(--color-brand-primary);

  /* ---- misc ----------------------------------------------------------- */
  --focus-ring-color: var(--color-brand-primary);
  --selection-bg: var(--color-brand-primary);
  --selection-text: var(--color-brand-primary-contrast);
  --icon-color: var(--color-text-muted);
  --icon-color-hover: var(--color-brand-primary-text);
  --sticky-z: var(--z-sticky);
  --dropdown-z: var(--z-dropdown);
  --modal-z: var(--z-modal);

  /* accent-tinted overlays (used by the hero/promo treatments) */
  --overlay-accent-70: color-mix(in srgb, var(--color-accent) 70%, transparent);
  --overlay-accent-10: color-mix(in srgb, var(--color-accent) 10%, transparent);

  /* full-bleed lightbox / gallery scrim. Solid black in BOTH modes — the
     element's own `opacity` does the work, as the template intended, so this
     must NOT become a translucent tint or a dark-mode-aware surface. */
  --overlay-scrim: var(--color-scrim);

  /* ---- mobile app chrome (Micro-prompt 28) ----------------------------
     The app bar and bottom nav sit ON the brand colour, so their text is the
     brand contrast and their count badges use the raised brand step to read
     apart from the surface behind them.

     `--on-brand-*` — translucent WHITE for chrome that sits on a brand-coloured
     surface. These deliberately do NOT use the `--overlay-white-*` tokens:
     theme-default.css repurposes those as DARK tints in dark mode, which is
     right for dark surfaces but wrong here. Before Micro-prompt 35 the app-bar
     rule, the bottom-nav border and four hero tokens used `--overlay-white-*`,
     so in dark mode the hero's welcome line and subtext rendered dark-on-red —
     measured at 3.98:1 against a 4.5:1 requirement (§21.4). Identical values in
     light mode, corrected in dark. */
  --on-brand-80: color-mix(in srgb, var(--color-brand-primary-contrast) 80%, transparent);
  --on-brand-50: color-mix(in srgb, var(--color-brand-primary-contrast) 50%, transparent);
  --on-brand-30: color-mix(in srgb, var(--color-brand-primary-contrast) 30%, transparent);
  --on-brand-20: color-mix(in srgb, var(--color-brand-primary-contrast) 20%, transparent);
  --on-brand-10: color-mix(in srgb, var(--color-brand-primary-contrast) 10%, transparent);

  --appbar-bg: var(--color-brand-primary);
  --appbar-text: var(--color-brand-primary-contrast);
  --appbar-rule: var(--on-brand-30);

  --count-badge-bg: var(--color-brand-primary-raised);
  --count-badge-text: var(--color-brand-primary-contrast);
  --count-badge-radius: var(--radius-pill);
  --count-badge-ring: var(--color-brand-primary);

  --search-pill-bg: var(--color-surface);
  --search-pill-text: var(--color-text);
  --search-pill-placeholder: var(--color-text-muted);
  --search-pill-icon: var(--color-brand-primary);
  --search-pill-radius: var(--radius-pill);
  --search-pill-shadow: var(--shadow-xs);

  --bnav-bg: var(--color-brand-primary);
  --bnav-text: var(--color-brand-primary-contrast);
  --bnav-active-bg: var(--color-brand-primary-raised);
  --bnav-active-text: var(--color-brand-primary-contrast);
  --bnav-active-radius: var(--radius-md);
  --bnav-border: var(--on-brand-10);
  --bnav-z: var(--z-sticky);

  /* ---- hero promo card (Micro-prompt 29) ------------------------------
     A rounded brand-red card with the copy on the left and lifestyle art on
     the right, per the reference. The art is tinted toward the brand with a
     translucent overlay so a photo shot on a different background still reads
     as part of the card. */
  --hero-radius: var(--radius-xl);
  --hero-padding: var(--space-6);
  --hero-bg-from: var(--color-brand-primary);
  --hero-bg-to: var(--color-brand-primary-deep);
  --hero-text: var(--color-brand-primary-contrast);
  --hero-welcome-text: var(--on-brand-80);
  --hero-rule: var(--on-brand-30);
  --hero-min-height: 240px;

  --hero-cta-bg: var(--color-accent);
  --hero-cta-text: var(--color-accent-contrast);
  --hero-cta-bg-hover: var(--color-accent-hover);
  --hero-cta-radius: var(--radius-pill);

  --hero-ghost-text: var(--color-brand-primary-contrast);
  --hero-ghost-border: var(--on-brand-50);
  --hero-ghost-bg-hover: var(--on-brand-20);

  --hero-dot-bg: var(--on-brand-50);
  --hero-dot-active-bg: var(--color-brand-primary-contrast);
  --hero-dot-size: 7px;
  --hero-dot-active-width: 20px;

  --hero-art-tint: var(--color-brand-primary);
  --hero-art-tint-opacity: 0.28;

  /* The legibility scrim laid over the hero photo so the copy stays readable.
     Previously written inline in two component rules (desktop + mobile), which
     meant a theme could not change the TREATMENT — only the colour. Lifting it
     into a token lets neo-brutalism replace the soft fade with a hard split
     (Micro-prompt 33). The defaults below are the exact expressions those rules
     used, so the default theme is unchanged. */
  --hero-fade-image: linear-gradient(
    90deg,
    var(--hero-bg-from) 0%,
    var(--hero-bg-from) 34%,
    color-mix(in srgb, var(--hero-bg-from) 70%, transparent) 54%,
    transparent 80%
  );
  --hero-fade-image-mobile: linear-gradient(
    90deg,
    var(--hero-bg-from) 0%,
    var(--hero-bg-from) 46%,
    color-mix(in srgb, var(--hero-bg-from) 72%, transparent) 66%,
    transparent 92%
  );

  /* ---- section header (Micro-prompt 30) --------------------------------
     The [icon] Title ......... View all -> pattern, built once in
     js/components/section-header.js and reused by every section. */
  --section-header-icon: var(--color-brand-primary);
  --section-header-title: var(--color-text);
  --section-header-link: var(--color-brand-primary-text);
  --section-header-link-hover: var(--color-brand-primary-hover);
  --section-header-gap: var(--space-3);
  --section-header-margin: var(--space-5);

  /* ---- category tile (Micro-prompt 30) ---------------------------------
     A soft-neutral rounded square with the image inside and the name BELOW it,
     per the reference's "Makundi Yetu" row. */
  --category-tile-bg: var(--color-surface-alt);
  --category-tile-bg-hover: var(--color-border);
  --category-tile-radius: var(--radius-lg);
  --category-tile-size: 116px;
  --category-tile-pad: var(--space-3);
  --category-tile-radius-mobile: var(--radius-lg);
  --category-tile-size-mobile: 88px;
  --category-name-color: var(--color-text);
  --category-name-hover: var(--color-brand-primary-text);
  --category-glyph-color: var(--color-text-subtle);

  /* ---- product card (Micro-prompt 31) ---------------------------------
     The "Bidhaa Maarufu" card: discount badge top-left, wishlist heart
     top-right, image, clamped title, price row, rating row and a circular
     add-to-cart button bottom-right. */
  --pcard-bg: var(--color-surface);
  --pcard-radius: var(--radius-lg);
  --pcard-border: var(--color-border);
  --pcard-shadow: var(--shadow-xs);
  --pcard-shadow-hover: var(--shadow-md);
  --pcard-padding: var(--space-3);
  --pcard-gap: var(--space-3);

  --pcard-media-bg: var(--color-surface-alt);
  --pcard-media-radius: var(--radius-md);
  --pcard-placeholder: var(--color-text-subtle);

  --pcard-title: var(--color-text);
  --pcard-title-hover: var(--color-brand-primary-text);
  --pcard-title-lines: 2;

  --pcard-price: var(--color-brand-primary-text);
  --pcard-was: var(--color-text-muted);
  --pcard-rating: var(--color-text-muted);

  --pcard-badge-bg: var(--color-danger);
  --pcard-badge-text: var(--color-danger-contrast);
  --pcard-badge-radius: var(--radius-pill);

  --pcard-fav-bg: var(--color-surface);
  --pcard-fav-icon: var(--color-brand-primary);
  --pcard-fav-icon-active: var(--color-danger);
  --pcard-fav-shadow: var(--shadow-xs);

  --pcard-cart-bg: var(--color-brand-primary);
  --pcard-cart-text: var(--color-brand-primary-contrast);
  --pcard-cart-bg-hover: var(--color-brand-primary-hover);
  --pcard-cart-bg-disabled: var(--color-surface-alt);
  --pcard-cart-text-disabled: var(--color-text-subtle);
  --pcard-cart-size: 38px;

  /* ---- auth shell (split entry screen) — login.html / register.html ----
     The reference design is a two-column entry screen: a quiet form panel
     against a saturated photographic brand panel. Every colour below is a
     layer-2 reference, so all four themes and both modes apply; shape uses
     --radius-sm so it reads as the reference's near-square corners in the
     default theme while still adopting each skin's own language. */
  --auth-panel-bg: var(--color-surface);
  --auth-panel-text: var(--color-text);
  --auth-muted: var(--color-text-muted);
  --auth-rule: var(--color-border-strong);
  --auth-form-width: 22rem;
  --auth-gutter: var(--space-5);

  --auth-field-bg: var(--color-surface-alt);
  --auth-field-text: var(--color-text);
  --auth-field-placeholder: var(--color-text-muted);
  --auth-field-radius: var(--radius-sm);
  /* 2.75rem, not 3: with five fields the registration form has to clear a
     ~680px viewport without scrolling (Micro-prompt 37). */
  --auth-field-height: 2.75rem;

  --auth-cta-bg: var(--button-primary-bg);
  --auth-cta-text: var(--button-primary-text);
  --auth-cta-bg-hover: var(--button-primary-bg-hover);
  --auth-cta-radius: var(--radius-sm);

  --auth-social-bg: var(--color-surface);
  --auth-social-text: var(--color-text);
  --auth-social-border: var(--color-border-strong);
  --auth-social-bg-hover: var(--color-surface-alt);

  --auth-brand-bg: var(--color-brand-primary);
  --auth-brand-text: var(--color-brand-primary-contrast);
  --auth-brand-rule: var(--on-brand-50);
  --auth-brand-caption: var(--on-brand-80);
  --auth-display-font: "Playfair Display", Georgia, "Times New Roman", serif;

  /* ---- legal documents (/terms, /policy) -------------------------------
     Long-form reading surfaces. The measure is capped in `ch` so the line
     length stays readable at any viewport, which is the single biggest
     difference between a professional policy page and a wall of text. */
  --legal-text: var(--color-text-muted);
  --legal-heading: var(--color-text);
  --legal-rule: var(--color-border);
  --legal-link: var(--color-brand-primary-text);
  --legal-strong: var(--color-text);
  --legal-measure: 68ch;
  --legal-notice-bg: var(--color-warning-subtle);
  --legal-notice-text: var(--color-text);
  --legal-toc-text: var(--color-text-muted);
  --legal-toc-strong: var(--color-text);
  --legal-toc-active-text: var(--color-brand-primary-text);
  --legal-toc-active-bg: var(--color-surface-alt);
}