/**
 * ANBOOST Storefront — Design Tokens (Phase 1 SDS Foundation)
 *
 * Single source of truth for non-brand visual primitives.
 * Merchant brand colors/fonts remain owned by css-variable.blade.php
 * and map through --sf-action / --sf-font-* below.
 *
 * Class contracts (do not rename — themes & Builder depend on these):
 *   .cmn-btn, .cmn-btn-bg-*, .cmn-btn-outline-*, .btn-wrapper
 *   .form-control, .form--control, .form--input
 *   .global-card, .global-card-thumb, .global-card-contents
 *   .nice-select
 *
 * Scope: visitor storefront only. No architecture / Builder / logic changes.
 */

:root {
  /* ------------------------------------------------------------------
     Spacing scale
     ------------------------------------------------------------------ */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-5: 1.25rem;
  --sf-space-6: 1.5rem;
  --sf-space-8: 2rem;
  --sf-space-9: 2.5rem;
  --sf-space-10: 3rem;
  --sf-space-12: 4rem;
  --sf-space-16: 5.5rem;

  /* Proximity groups (composition rhythm) */
  --sf-group-tight: 0.4rem;
  --sf-group-in: 0.75rem;
  --sf-group-gap: 1.5rem;
  --sf-group-section: 2.25rem;

  /* ------------------------------------------------------------------
     Typography scale (optical; merchant fonts still apply)
     ------------------------------------------------------------------ */
  --sf-type-display: clamp(1.65rem, 2.2vw, 2.05rem);
  --sf-type-title: clamp(1rem, 1.15vw, 1.125rem);
  --sf-type-price: clamp(1.45rem, 2vw, 1.85rem);
  --sf-type-price-card: 1.125rem;
  --sf-type-body: 0.9375rem;
  --sf-type-meta: 0.8125rem;
  --sf-type-micro: 0.6875rem;
  --sf-title-tracking: -0.025em;

  /* ------------------------------------------------------------------
     Control geometry
     ------------------------------------------------------------------ */
  --sf-control-height: 3.1rem;
  --sf-control-height-sm: 2.35rem;
  --sf-cta-height: 3.2rem;

  /* Radius — soft premium, not square-zero, not pill CTAs */
  --sf-radius-sm: 0.375rem;   /* 6px — chips, badges */
  --sf-radius-md: 0.55rem;    /* ~9px — buttons, inputs */
  --sf-radius-lg: 0.85rem;    /* ~14px — cards, panels */
  --sf-radius-xl: 1.15rem;    /* ~18px — large media frames */
  --sf-radius-pill: 999px;    /* counts only — not primary CTAs */

  /* ------------------------------------------------------------------
     Borders & elevation (quiet depth — no glow)
     ------------------------------------------------------------------ */
  --sf-border: rgba(15, 23, 42, 0.08);
  --sf-border-strong: rgba(15, 23, 42, 0.16);
  --sf-hairline: rgba(15, 23, 42, 0.09);
  --sf-surface: #ffffff;
  --sf-surface-muted: rgba(15, 23, 42, 0.025);

  --sf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --sf-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --sf-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);
  --sf-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.07), 0 14px 32px rgba(15, 23, 42, 0.08);
  --sf-shadow-float: 0 10px 40px rgba(15, 23, 42, 0.12);

  /* Readable neutrals (themes may still use merchant heading/body colors) */
  --sf-muted: #667085;
  --sf-placeholder: #98a2b3;
  --sf-ink: #1a2332;
  --sf-body-readable: #344054;

  /* ------------------------------------------------------------------
     Focus & motion
     ------------------------------------------------------------------ */
  --sf-focus-ring: 0 0 0 3px color-mix(in srgb, var(--main-color-one, #1E88E5) 28%, transparent);

  --sf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-duration-fast: 120ms;
  --sf-duration: 180ms;
  --sf-duration-slow: 240ms;

  /* Microinteraction recipes (Phase 1 foundation) */
  --sf-lift-hover: -1px;
  --sf-press-scale: 0.98;
  --sf-image-hover-scale: 1.04;

  /* ------------------------------------------------------------------
     Semantic status (unified; not merchant brand)
     ------------------------------------------------------------------ */
  --sf-success: #157a3f;
  --sf-success-bg: #e8f7ee;
  --sf-success-border: #b7e4c7;
  --sf-warning: #b45309;
  --sf-warning-bg: #fff7ed;
  --sf-warning-border: #fdba74;
  --sf-error: #b42318;
  --sf-error-bg: #fef3f2;
  --sf-error-border: #fecdca;
  --sf-info: #175cd3;
  --sf-info-bg: #eff8ff;
  --sf-info-border: #b2ddff;
  --sf-disabled: #98a2b3;
  --sf-disabled-bg: #f2f4f7;

  /* ------------------------------------------------------------------
     Merchant brand bridges (settings remain authoritative)
     ------------------------------------------------------------------ */
  --sf-action: var(--main-color-one, #1E88E5);
  --sf-action-2: var(--main-color-two, var(--main-color-one, #1E88E5));
  --sf-heading: var(--heading-color, #101828);
  --sf-body: var(--body-color, #475467);
  --sf-font-heading: var(--heading-font, inherit);
  --sf-font-body: var(--body-font, inherit);
}