/* ============================================================
   Digital Commerce Integration — tjk kit · LIGHT mapping for the marketplace
   ------------------------------------------------------------
   The component kit in tj-kit.css consumes the --adm-* tokens.
   The customer storefront never loads tj-admin-tokens.css, so
   this file (loaded by web/layout.blade.php AFTER tj-kit.css)
   defines them with the light values from tj-tokens.css. The
   same values live in the html[data-theme="light"] block of
   tj-theme.css — keep the two in sync.
   ============================================================ */
:root{
    /* ── Canvas & surfaces ── */
    --adm-bg:        var(--tj-bg, #f5f6f8);
    --adm-surface:   #ffffff;
    --adm-surface-2: #f9fafb;
    --adm-raised:    #f3f4f6;
    --adm-side:      #ffffff;
    --adm-side-bg:        var(--adm-side);
    --adm-side-bg-2:      #f9fafb;
    --adm-side-border:    #e5e7eb;
    --adm-side-text:      #4b5563;
    --adm-side-text-hi:   #111827;
    --adm-side-label:     #6b7280;

    /* ── Accent: brand scale, darkened for light backgrounds ── */
    --adm-accent-50:  var(--tj-brand-50);
    --adm-accent-100: var(--tj-brand-100);
    --adm-accent-200: var(--tj-brand-200);
    --adm-accent-300: var(--tj-brand-deep);   /* "ink on tint" reads dark on light */
    --adm-accent-400: var(--tj-brand-hover);
    --adm-accent-500: var(--tj-brand);
    --adm-accent-600: var(--tj-brand-hover);
    --adm-accent-700: var(--tj-brand-deep);
    --adm-accent:     var(--adm-accent-500);
    --adm-violet:     var(--adm-accent-400);
    --adm-cyan:       var(--adm-accent-400);
    --adm-focus-ring: 0 0 0 3px rgba(var(--tj-brand-rgb),.18);

    /* ── Semantic: solid + light tint + dark ink ── */
    --adm-success: #12a86b;  --adm-success-50: #e6f7ef;  --adm-success-ink: #0b7a4e;
    --adm-warning: #e0891a;  --adm-warning-50: #fdf3e4;  --adm-warning-ink: #a35b06;
    --adm-danger:  #dc2626;  --adm-danger-50:  #fdecec;  --adm-danger-ink:  #b42323;
    --adm-info:    #0284c7;  --adm-info-50:    #e7f3fb;  --adm-info-ink:    #06618f;

    /* ── Text & lines ── */
    --adm-ink:          var(--tj-ink,   #111827);
    --adm-ink-2:        var(--tj-ink-2, #1f2937);
    --adm-muted:        #4b5563;
    --adm-muted-2:      #6b7280;
    --adm-border:       #e5e7eb;
    --adm-border-2:     #f0f1f3;
    --adm-input-border: #d1d5db;
    --adm-input-bg:     #ffffff;
    --adm-hover-border: #9ca3af;

    /* ── Radii ── */
    --adm-r-sm:   6px;
    --adm-r:      8px;
    --adm-r-lg:   12px;
    --adm-r-xl:   16px;
    --adm-r-full: 999px;

    /* ── Depth ── */
    --adm-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
    --adm-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
    --adm-shadow:    0 2px 4px -1px rgba(16,24,40,.05), 0 8px 20px -8px rgba(16,24,40,.10);
    --adm-shadow-lg: 0 12px 32px -10px rgba(16,24,40,.20), 0 2px 6px rgba(16,24,40,.05);
    --adm-glow:      none;
    --adm-glow-soft: none;
    --adm-blur:      none;

    --adm-tone-soft: #f3f4f6;
    --adm-tone-ink:  #4b5563;
    --adm-hero-bg:    var(--tj-brand-50);
    --adm-hero-ink:   #111827;
    --adm-hero-ink-2: #4b5563;

    /* ── Motion ── */
    --adm-dur-instant: 100ms;
    --adm-dur-reveal:  180ms;
    --adm-dur-surface: 240ms;
    --adm-ease:        cubic-bezier(.2,.8,.2,1);

    /* ── Type: storefront stack ── */
    --adm-font: var(--tj-font, "Inter", "Cairo", -apple-system, sans-serif);
    --adm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}